画线工具Canvas：线条属性全解密，让你的作品更专业

一、线条的帽子lineCap

你知道吗？画线工具Canvas里，线条属性之一就是’lineCap’，它控制着线条的开头和结尾。Canvas给我们提供了3个选项：butt（默认）、round和square。当用butt时，两端是整齐的直线；接下来是round，两边会变得圆滑；最后是square，两端变成方形。注意，这个属性只影响线条的开头和结尾，而不包括那中间的链接部分。想让线段处处封闭的话，虽然也能用lineCap=”square”试试看，不过我还是建议你用closePath()这个方法来封口。

var canvas=document.getElementById("canvas");
canvas.width=800;
canvas.height=800;
var context=canvas.getContext("2d");
context.lineWidth=40;
context.strokeStyle="#005588";
//三个beginpath()画了3条平行线
context.beginPath();
context.moveTo(100,200);
context.lineTo(700,200);
context.lineCap="butt";
context.stroke();
context.beginPath();
context.moveTo(100,400);
context.lineTo(700,400);
context.lineCap="round";
context.stroke();
context.beginPath();
context.moveTo(100,600);
context.lineTo(700,600);
context.lineCap="square";
context.stroke();
//baseline
context.lineWidth=1;
context.strokeStyle="#27a";
context.moveTo(100,100);
context.lineTo(100,700);
context.moveTo(700,100);
context.lineTo(700,700);
context.stroke();

二、画一个五角星，说明线条其它状态属性

画五角星最关键要会换算角度和弧度。记住五个角总共有72°，然后在小圆里分掉各占其中的54°就行了。用公式把角度换成弧度（弧度就是角度乘以π除以180），就能算出我们要在哪儿起笔。再用这种方法，通过改半径和调整方向，画出各种款式的五角星来也是很容易做到滴！

var canvas=document.getElementById("canvas");
canvas.width=800;
canvas.height=800;
var context=canvas.getContext("2d");
context.beginPath();
context.moveTo(100, 350);
context.lineTo(500,350);
context.lineTo(500,200);
context.lineTo(700,400);
context.lineTo(500,600);
context.lineTo(500,450);
context.lineTo(100,450);
context.lineTo(100,350);
// context.closePath(); //推荐
context.lineWidth=10;
context.lineCap="square"; //不推荐
context.fillStyle="yellow";
context.strokeStyle="#058"
context.fill();
context.stroke();

三、线条的连接lineJoin和miterLimit

Canvas不仅能画线条，还有两个小功能——lineJoin和miterLimit，用来控制两条线交叉的地方是哪样的。先来说说lineJoin，它有三个选项，用得最多的就是miter（默认设置），表示这俩线交叉口尖尖的；bevel会让它们的接口比较平滑，过渡自然；round就更有趣，让这个角变成圆形，感觉像个挂件儿似的。你要是选miter的话，还可以调节miterLimit这个小按钮！它指的是你想让两次线叠加后从哪个点开始锐利起来，超过那个距离就选择bevel那种比较平滑的过渡咯。

四、其他状态属性介绍

var canvas=document.getElementById("canvas");
canvas.width=800;
canvas.height=800;
var context=canvas.getContext("2d");
context.beginPath();
//角度转弧度：除以180*PI
for(var i=0;i<5;i++){
    context.lineTo(Math.cos((18+i*72)/180*Math.PI)*300+400,
        -Math.sin((18+i*72)/180*Math.PI)*300+400);
    context.lineTo(Math.cos((54+i*72)/180*Math.PI)*150+400,
        -Math.sin((54+i*72)/180*Math.PI)*150+400);
}
context.closePath();
context.lineWidth=10;
context.stroke();

Canvas的关键属性不仅于此，你还能调整其他一些状态属性来玩出花样儿。比如说做图的时候，改个颜色啦、轮廓线的颜料啦、透明度之类的都行。甚至有阴影啊、过度填充什么的效果也能加进去。这些都是CanvasRenderingContext2D这个家伙搞出来的。

五、路径绘制与样式设置

window.onload=function(){
    var canvas=document.getElementById("canvas");
    canvas.width=800;
    canvas.height=800;
    var context=canvas.getContext("2d");
    context.lineWidth=10;
    drawStar(context,150,300,400,400)
}        
function drawStar(ctx,r,R,x,y,){
    ctx.beginPath();
    //角度转弧度：除以180*PI
    for(var i=0;i<5;i++){
        ctx.lineTo(Math.cos((18+i*72)/180*Math.PI)*R+x,
            -Math.sin((18+i*72)/180*Math.PI)*R+y);
            ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*r+x,
            -Math.sin((54+i*72)/180*Math.PI)*r+y);
    }
    ctx.closePath();
    ctx.stroke();
}

Canvas上画线路径挺重要的，用得也多。你就先用moveTo()方法移到想要开始画的地方，再用lineTo()方法在各处连线起来。当然，还有好多可以让你的路径更好看的小东西，比如线宽、颜色之类的。

六、变换操作与动画效果

Canvas能让你随心所欲地移动、旋转、放大缩小你画出来的图像！这些巧妙的操控让你能轻松地调整图形的位置、大小和方向，甚至能制作出像模像样的动画！如果再加上定时器函数requestAnimationFrame()这种神奇工具的话，动画效果会更加溜哦～

七、事件处理与交互功能

Canvas还能让你和用户互动，鼠标一点或者轻轻一触，就能激活图形元素，然后就有相应的操作逻辑出现。这些都是靠监听鼠标动作或者触摸感应，配合坐标测试这种小把戏来实现哒~想玩玩点击啊、拖曳啊、放大缩小什么的都没问题！

window.onload=function(){
    var canvas=document.getElementById("canvas");
    canvas.width=800;
    canvas.height=800;
    var context=canvas.getContext("2d");
    context.lineWidth=10;
    drawStar(context,150,300,400,400,30);
}        
//rot顺时针旋转的角度
function drawStar(ctx,r,R,x,y,rot){
    ctx.beginPath();
    //角度转弧度：除以180*PI
    for(var i=0;i<5;i++){
        ctx.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,
            -Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
            ctx.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,
            -Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
    }
    ctx.closePath();
    ctx.stroke();
}

八、性能优化与最佳实践

用Canvas做开发的时候，想要提升流畅度和用户满意度的话，记住下面几点骚操作就行了。比如，别老用重绘功能，适当缓存也能加速；再者就是少算点没用的东西，这些小技巧就能让你的程序更快更爽！

九、跨平台应用与兼容性处理

Canvas是HTML5里规定的玩意儿，所以用它做东西会有各种各样的兼容性问题。所以，我们就要想办法让它在各种浏览器跟设备上都能用，就得给它们分别处理一下才能保证页面好看好用。

。