canvas入门（一）

html代码如下：

<canvas id="canvas"></canvas>

以下均为js代码

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

上面代码第二句作用是得到一个绘图的上下文环境。参数“2d”是指二维绘图。

context.width = 800;
context.height = 800;

上面代码指定了canvas画布的大小，默认为width：300， height：150。也可以用css指定画布的大小，但只能设置画布显示的大小，而上面代码的作用不仅设置画布显示的大小，还包括了画布内里显示的图画分辨率的大小。

绘制直线代码如下：

context.moveTo(100, 100);
context.lineTo(300, 300);

context.strokeStyle = "red";//线条的颜色
context.lineWidth = 3;//线条的宽度
context.stroke();//线条的绘制函数

 

填充函数为

context.fillStyle = "green";//设置填充的颜色
context.fill();//在线条内填充颜色

如果fill()和stroke()同时使用时，fill放在stroke后面时，fill填充的颜色会覆盖掉一部分线条（线条宽度宽的时候很明显），解决办法是把fill和stroke交换，让stroke放在fill后面。

当需要画第二个线段，或者第二个图形时，只需重新调用context.moveTo(x, y); moveTo是重新指定一个点，lineTo是连接上一个点

当画布中存在不只一个图形时，后面的context.strokeStyle会覆盖前面的context.strokeStyel。如

    context.moveTo(100, 100);
    context.lineTo(700, 700);
    context.lineTo(100, 700);
    context.lineTo(100, 100);
    
    context.lineWidth = 5;//单位是像素
    context.strokeStyle = "red";

    context.stroke();//笔画绘制
    
    context.moveTo(200, 200);
    context.lineTo(500, 200);
    context.lineTo(500, 500);
    context.lineTo(200, 500);
    context.lineTo(200, 200);


    context.strokeStyle="black";
    context.stroke();

这时显示出来的两个图形颜色都是黑色的。因为后面的strokeStyle会覆盖住前面的。canvas绘图是先设置状态，再继续绘制，所以上面的代码中第二个stroke()其实把上面的两个图形都绘制了一遍，并且用的是第二个strokeStyle。如果要分开分别绘制，代码如下

    context.beginPath();
    context.moveTo(100, 100);
    context.lineTo(700, 700);
    context.lineTo(100, 700);
    context.lineTo(100, 100);
    context.closePath();

用context.beginPath()和context.closePath()分隔开每个路径。这样就可以为不同的路径设置不同的颜色了。beginPath是开始一段路径，closePath是表示当前的路径是封闭路径，并且已经结束。