HTML5中canvas介绍

canvas 提供了一个空白的图形区域，可以使用特定的JavaScript API来绘画图形（canvas 2D或WebGL）

首先由 Apple 引入的，用于OS X的仪表盘 和 Safari 浏览器

<canvas width="600" height="400"></canvas>

<canvas width="600" height="400">
    IE9及其以上版本的浏览器，才支持canvas标签
    提示：您的浏览器不支持canvas，请升级浏览器
</canvas>

使用 属性设置宽高，实际上相当于增加了 canvas画布的像素
默认宽高： 300*150，表示：水平方向有300个像素，垂直方向有150个像素
使用属性设置宽高，是增加或减少了canvas画布的像素；
而使用css样式，不会增加像素点，只是将每个像素点扩大了！

// 1 找到canvas
var cv = document.getElementById("canvasId");
// 2 拿到canvas绘图上下文
var ctx = cv.getContext("2d");
// 3 使用上下文中的API绘制图形
ctx.moveTo(100, 100);   // 将画笔移动到 100,100 的位置
ctx.lineTo(200, 100);   // 从 100,100 到 200,100 画一条线段
ctx.stroke();           // 描边

getContext("2d"), 参数`2d`是指获取到绘制平面图形的上下文;
如果想绘制立体图形，需要传入参数："webgl"

2d上下文类型：CanvasRenderingContext2D

获得 webgl 上下文：（了解）
var cCv = document.createElement("canvas");
        console.log(cCv.getContext("webgl"));
查看浏览器是否支持 webgl：http://doesmybrowsersupportwebgl.com/
webgl示例：http://pablotheflamingo.com/

var startPosX = 100,
    step = 10,
    targetX = 500;
while(startPosX + step <= targetX) {
    ctx.moveTo(startPosX, 100);
    ctx.lineTo(startPosX += step, 100);

    startPosX += step;
}

ctx.stroke();

var startX = 0, startY = 0,
    stepX = 5, stepY = cv.height / cv.width * stepX;

while(true) {
    if(startX >= 600 || startY >= 400) {
        break;
    }

    ctx.moveTo(startX, startY);
    ctx.lineTo(startX += stepX, startY += stepY);

    startX += stepX;
    startY += stepY;
}

如果所有的描点没有构成封闭结构，也会自动构成一个封闭图形

以下是非0环绕原则的原理：（了解即可，非常少会用到复杂的路径）
“非零环绕规则”是这么来判断有自我交叉情况的路径的：对于路径中的任意给定区域，
从该区域内部画一条足够长的线段，使此线段的终点完全落在路径范围之外。

接下来，将计数器初始化为0，
然后，每当这条线段与路径上的直线或曲线相交时，
就改变计数器的值。如果是与路径的顺时针部分相交，则加1，
如果是与路径的逆时针部分相交，则减1。若计数器的最终值不是0，那么此区域就在路径里面，
在调用fill()方法时，浏览器就会对其进行填充。
如果最终值是0，那么此区域就不在路径内部，浏览器也就不会对其进行填充了

    例如：
    ctx.strokeStyle = "red";      
    ctx.strokeStyle = "#ccc";      
    ctx.strokeStyle = "rgb(255,0,0)";      
    ctx.strokeStyle = "rgba(255,0,0,6)";  

function Line(config) {
    this._init(config);
}
Line.prototype = {
    constructor: Line,
    _init: function(config) {
        this.ctx = config.context;
        this.x0 = config.points[0];
        this.y0 = config.points[1];
        this.x = config.points[2];
        this.y = config.points[3];

        this.strokeStyle = config.strokeStyle;
        this.lineWidth = config.lineWidth;
    },
    stroke: function() {
        this.ctx.moveTo(this.x0, this.y0);
        this.ctx.lineTo(this.x, this.y);

        // 判断有没有值
        if(this.strokeStyle) {
            this.ctx.strokeStyle = this.strokeStyle;
        }
        if(this.lineWidth) {
            this.ctx.lineWidth = this.lineWidth;
        }

        this.ctx.stroke();
    }
};

var line1 = new Line({
    context: ctx,
    points: [100, 100, 500, 100],
    strokeStyle: "green",
    lineWidth: 10
});
line1.stroke();