Canvas

2018-03-16

Canvas 官方文档

一. 概述

HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。
不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。

二. Sass 使用方法：

画布的编程模式 先清除，再重绘.
画布的特点是绘制的元素无法更改.

  1. 矩形

    1
    2
    ctx.fillRect(x,y,width,height) //填充矩形
    ctx.strokeRect(x,y,width,height) //框线矩形

  2. 圆

    1
    2
    3
    4
    //sAngle: 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度
    //eAngle: 结束角，以弧度计。
    //counterclockwise: 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
    context.arc(x,y,r,sAngle,eAngle,counterclockwise);

  3. 弧/曲线

    1
    2
    ctx.arcTo(x1,y1,x2,y2,r) //创建两切线之间的弧/曲线
    ctx.stroke();            // 进行绘制

  4. 其余总结

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    ctx.save() //保存当前环境的状态

    ctx.beginPath() //开始一个路径

    ctx.moveTo() //移动点来到开始的某点
    ctx.lineTo() //让路径中拥有一条到某点的线，但是并不会直接绘制出来

    ctx.fill() //填充当前路径
    ctx.stroke() //描边

    ctx.closePath() //结束一个路径
    ctx.restore() //返回之前保存过的路径状态和属性

    ctx.clearRect(x,y,width,height) //在给定的矩形内清除指定的像素

四. Canvas 实例：

  1. 画矩形
    1
    <canvas id="canvas"></canvas>
    1
    2
    3
    4
    var canvas = document.getElementById('canvas'); //获取HTML <canvas> 元素的引用
    var ctx = canvas.getContext('2d'); //返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
    ctx.fillStyle = 'green';// 填充 
    ctx.fillRect(10, 10, 150, 100);//它的左上角放在(10, 10)，把它的大小设置成宽150高100。
  2. 倒计时
    1
    <canvas id="canvas" width="200" height="200" style="border: 1px solid #000000"></canvas>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    var c = document.getElementById('canvas'); //获取HTML <canvas> 元素的引用
    var ctx = canvas.getContext('2d'); //返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

    //画圆
    var size=c.width;
    ctx.arc(size/2, size/2, size/2, 0, 2*Math.PI, false);
    ctx.fillStyle="#000000";
    ctx.fill();
    ctx.closePath();

    var i=1, total=5;
    var draw = function() {
        ctx.beginPath();
        ctx.moveTo(100,100);
        ctx.arc(size/2, size/2, size/2, -0.5*Math.PI, -0.5*Math.PI + 2*Math.PI/total * (i++), false);
        ctx.fillStyle="#ccc";
        ctx.fill();
        ctx.closePath();
        ctx.restore();

        ctx.save();
        ctx.textAlign = "center";
        ctx.textBassline = "middle";
        ctx.font="50px Arial";
        ctx.fillStyle="green";
        ctx.fillText(1+ total-i, size/2, size/2);
        if(i>total){
            clearInterval(fun)
        }
    }
    var fun = setInterval(draw, 1000)
CATALOG