h5 canvas学习笔记

创建画布：

    
        你的浏览器不支持canvas
    

以上代码为在html文件里面添加一个canvas标签（若浏览器不支持此属性则会显示“你的浏览器不支持canvas”），除了width和height属性外，其还支持h5的标准属性，但是，canvas不是块级元素，在设置其居中的时候，要么外层包一个div，要么设置body的text-align为center。

获取画笔：

    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

其中canvas是画布元素，ctx可以简单的理解为画笔。canvas本身是一块画布，没有画图能力，需要使用js来画图。

画图步骤：

1. 保存当前的画图状态（save()函数）
2. 设置画笔属性
3. 勾勒或者填充
4. 切换回保存的画图状态（restore()）

其中，第一步和第四步是需要配对使用的，它的意思是在画一个新的组件之前，将此时的画笔设置状态保存，在组件画完之后，恢复画笔状态，去除重复设置的

繁琐以及减少代码量和冗余。

样式设置：

ctx.fillStyle // 填充的颜色样式，值为十六进制表示或者其他的颜色表达式
ctx.strokeStyle // 勾勒的颜色样式，值同上
ctx.globalAlpha // 透明度样式，值为数字
ctx.lineWidth // 线条的宽度，单位是像素
ctx.lneCap // 线条的端点样式，值为butt/round/square，分别对应无端点、圆形端点、正方形端点
ctx.lineJoin // 两条直线的交汇处的拐角形状，值为miter/round/bevel，分别对应端点的尖角、圆角、斜角。

接口：

    // 绘制矩形、实心矩形
    ctx.strokeRect(x0, y0, width, height);
    ctx.fillRect(x0, y0, width, height);

    // 开始勾勒路径和结束勾勒路径
    ctx.beginPath();
    ctx.closePath();

    // 根据路径画图或者填充整个路径围起来的区域
    ctx.fill();
    ctx.stroke();

    // 绘制直线
    ctx.moveTo(startX, startY);
    ctx.lineTo(endX, endY);

    // 勾勒圆形路径
    // 参数：圆心坐标，半径，开始角度，结束角度，顺时针
    // 切记：顺时针为正角，与数学逆时针为正角有所不同
    ctx.arc(x0, y0, radius, startAngel, endAngel, Counterclockwise);

    // 绘制曲线
    // 参数：开始端点坐标，结束端点坐标
    ctx.arcTo(x1, y1, x2, y2, radius);

    // 颜色渐变
    // 参数：两个变化端点的坐标
    var obj = ctx.createLinearGradient(x1, y1, x2, y2);
    // 为渐变设置渐变色
    // 参数：距离起点的偏移量（范围0-1），颜色值
    obj.addColorStop(offset, color);

    // 平移
    // 参数：相对于原坐标的平移大小
    ctx.translate(x, y);
    // 缩放
    // 参数：相对于原坐标的缩放比
    ctx.scale(x, y);
    // 旋转
    // 旋转的角度，单位为°
    // 是以坐标原点为中心的旋转，如果需要以某点为中心旋转
    // 可使用translate()将坐标原点平移到该点位置，旋转后在平移回来
    ctx.rotate(x);

canvas的函数接口远远不止这些 戳这里了解更多

实例：

此实例为极客学院出品的《HTML5+CSS3web前端开发技术》里面一个模拟时钟的代码

    
    
    
    


    
        你的浏览器不支持Canvas
    

此外，我自己也动手做了一个canvas的小游戏，初期版本很粗糙，移动端某些浏览器可能无法兼容，有时间再去完善，有兴趣的朋友可以 戳这里玩玩。