Canvas学习笔记（一）线条和圆弧

canvas是HTML5中新增的一个重要元素，专门用来绘制图形，在页面上放置一个canvas元素，就相当于在页面上放置了一块“画布”，可以在其中进行图形的绘制。

<canvas id="canvas" width="1024" height="768"></canvas>

默认情况下该矩形区域宽为300像素，高为150像素，可以通过width和height属性来自定义”画布”的大小，
还可以给canvas元素设置css样式，如下所示:

#canvas {
    border: 1px solid #aaaaaa;
    display: block;
    margin: 50px auto;
}

在页面上放置了canvas元素后，便可以通过javascript在其中进行绘制了
首先通过引用canvas元素的id来获取对canvas对象的访问权，接着调用canvas对象的getContext()方法获取
用于在画布上绘图的上下文对象，参数“2d”指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图

var canvas = document.getElementById("canvas");
canvas.width = 1024;                            //也可以这样来设定canvas元素的尺寸
canvas.height = 768;
var context = canvas.getContext("2d"); 

使用canvas绘制一个三角形

//以画布左上角为原点，向右为x轴，向下为y轴
context.moveTo(100, 100);   //不进行绘制，只是将当前位置移动到指定的(x, y)坐标处
context.lineTo(700, 700);   //从起始点到(700, 700)画一条线段
context.lineTo(100, 700);   //在上一个点的基础上连接(100, 700)
context.lineTo(100, 100);   //同上，这里又回到了起始点
context.stroke();           //绘制线条

给三角形设置线宽、线条颜色和填充颜色

context.moveTo(100, 100);
context.lineTo(700, 700);
context.lineTo(100, 700);
context.lineTo(100, 100);
context.lineWidth = 3;              //定义线条宽度，单位像素
context.strokeStyle = "#005588";    //定义线条颜色
context.stroke();                   //绘制线条
context.fillStyle = "#458b00";      //定义填充颜色, 支持"rgb(r, g, b)"方式，默认为黑色
context.fill();                     //进行填充

绘制多个线段

context.moveTo(100, 100);
context.lineTo(700, 700);
context.lineTo(100, 700);
context.lineTo(100, 100);
context.lineWidth = 3;              //定义线条宽度，单位像素
context.strokeStyle = "#005588";    //定义线条颜色
context.stroke();                   //绘制线条
context.fillStyle = "#458b00";      //定义填充颜色
context.fill();                     //进行填充


context.moveTo(200, 100);           //第二条线段
context.lineTo(700, 600);
context.stroke();

可以发现第二条线段的颜色和三角形线条的颜色和线宽是一样的

如果给第二条线段设置了颜色

context.moveTo(100, 100);
context.lineTo(700, 700);
context.lineTo(100, 700);
context.lineTo(100, 100);
context.lineWidth = 3;              //定义线条宽度，单位像素
context.strokeStyle = "#005588";    //定义线条颜色
context.stroke();                   //绘制线条
context.fillStyle = "#458b00";      //定义填充颜色
context.fill();                     //进行填充

context.moveTo(200, 100);
context.lineTo(700, 600);
context.strokeStyle = "#ff6600";    //这次设置了颜色
context.stroke();

所有的线条颜色都变成了最后设置了#ff6600了，这是因为canvas的绘制是基于状态的，在绘制三角形调用stroke()方法之前，一个状态已经设定了，所以一开始是基于前6行代码设置的状态进行绘制的，但是当绘制第二个线段时，又重新设置了线条颜色为#ff6600，所以最后呈现出的结果就是所有线条都变成了#ff6600颜色

如果想要单独的绘制一个线条应该这么做：

context.beginPath();                //开始绘制一个路径
context.moveTo(100, 100);
context.lineTo(700, 700);
context.lineTo(100, 700);
context.lineTo(100, 100);
context.closePath();                //关闭路径，如果路径不封闭，会自动将首尾连接起来
context.lineWidth = 5;              //定义线条宽度，单位像素
context.strokeStyle = "#005588";    //定义线条颜色

context.stroke();                   //绘制线条
context.fillStyle = "#458b00";      //定义填充颜色
context.fill();                     //进行填充
context.beginPath();
context.moveTo(200, 100);
context.lineTo(700, 600);
context.closePath();
context.strokeStyle = "#ff6600";    //如果不指定颜色，将会继承之前的颜色
context.stroke();

beginPath()用于开始路径的创建。
closePath()则是关闭路径，路径的创建工作完成了，但是需要注意的是，这时只是路径创建完毕而已，还没有真正绘制图形，也就是说对于线条的绘制仍然要调用stroke()方法，对于图形的填充，仍然要调用fill()方法
如果没有给第二条线段指定线宽和颜色，将会继承上一个状态的线宽和颜色

绘制圆弧，非常简单的一个方法

/*
    context.arc(
        centerx, centery, radius,   圆心坐标，半径
        startingAngle, endingAngle, 开始和结束角度
        anticlockwise = false       是否以逆时针方向绘制，默认为false     
    )
*/

注意：对于canvas中的圆弧，角度都是固定的，如下所示

可能用代码描述比较清晰

window.onload = function() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    canvas.width = 600;
    canvas.height = 600;
    if(context) {
        //以(300, 300)为圆心，300为半径,顺时针从0度到0.5PI绘制一条圆弧
        context.arc(300, 300, 300, 0, 0.5*Math.PI, false);
        context.strokeStyle = "#005588";
        context.lineWidth = 3;
        context.stroke();
    }else {
        alert("当前浏览器不支持canvas")
    }
}

如果改变绘制方向

window.onload = function() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    canvas.width = 600;
    canvas.height = 600;
    if(context) {
        //以(300, 300)为圆心，300为半径,逆时针从0度到0.5PI绘制一条圆弧
        context.arc(300, 300, 300, 0, 0.5*Math.PI, true);
        context.strokeStyle = "#005588";
        context.lineWidth = 3;
        context.stroke();
    }else {
        alert("当前浏览器不支持canvas")
    }
}

所以说明了不管是顺时针还是逆时针，角度都是固定不变的，另外如果想要绘制一个圆，只需要把0.5*Math.PI改为2*Math.PI即可

使用以上知识绘制一个七巧板

//tangram数组定义七巧板内每一个图形的坐标和颜色
    var tangram = [
        {p:[{x:0, y:0}, {x:800, y:0}, {x:400, y:400}], color:"#caff67"},
        {p:[{x:0, y:0}, {x:400, y:400}, {x:0, y:800}], color:"#67becf"},
        {p:[{x:800, y:0}, {x:800, y:400}, {x:600, y:600}, {x:600, y:200}], color:"#ef3d61"},
        {p:[{x:600, y:200}, {x:600, y:600}, {x:400, y:400}], color:"#f9f51a"},
        {p:[{x:400, y:400}, {x:600, y:600}, {x:400, y:800}, {x:200, y:600}], color:"#a594c0"},
        {p:[{x:200, y:600}, {x:400, y:800}, {x:0, y:800}], color:"#fa8ece"},
        {p:[{x:800, y:400}, {x:800, y:800}, {x:400, y:800}], color:"#f6ca29"},
    ];
    window.onload = function() {
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        var context = canvas.getContext("2d");

        if(context) {

            //遍历tangram数组绘制七巧板
            for(var i = 0 ; i < tangram.length ; ++i) {
                //调用draw()方法单独绘制一个图形
                draw(tangram[i], context);
            }

            function draw(param, ctx) {
                ctx.beginPath();
                //将"画笔"移动到起始点
                ctx.moveTo(param.p[0].x, param.p[0].y);
                //连接一个图形的所有坐标
                for(var i = 1 ; i < param.p.length ; ++i) {
                    ctx.lineTo(param.p[i].x, param.p[i].y);
                }
                ctx.closePath();
                //填充颜色
                ctx.fillStyle = param.color;
                ctx.fill();
                ctx.lineWidth = 3;
                ctx.stroke();
            }
        }else {
            alert("当前浏览器不支持canvas");
        }
    }