canvas画布实践

添加canvas标签：相当于画布

<canvas id="myCanvas" width=500 height=500></canvas>

获得canavs元素

var canvas =document.getElementById('myCanvas');

获得canvas上下文对象：相当于画笔

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

ctx.moveTo(x, y); 移动到 x，y坐标点，起点

ctx.moveTo(100,100);

ctx.lineTo(x, y); 从当前点绘制直线到x，y点

ctx.lineTo(100, 200); 

ctx.stroke(); 画笔的类型描边

ctx.stroke();

ctx.lineWidth = 20; 设置线段宽度
ctx.closePath(); 闭合当前路径 和回到起始点的区别
ctx.fill(); 填充

1.fill和stroke方法都是作用在当前的所有子路径

2.完成一条路径后要重新开始另一条路径时必须使用beginPath()方法, betinPath开始子路径的一个新的集合
最后是这样的：填充和描边最后执行，闭合很方便，新路径会继承属性，但使用eginPath()方法后他就是独立的。

        var oCanvas = document.getElementById('myCanvas');
        var ctx = oCanvas.getContext('2d');
        ctx.moveTo(100, 100);
        ctx.lineTo(100, 200); 
        ctx.lineTo(200, 100);
        ctx.lineWidth = 10;
        ctx.fillStyle = 'red'
        ctx.closePath();
        ctx.stroke();
        ctx.fill();
        ctx.beginPath();
        ctx.moveTo(300, 300);
        ctx.lineTo(300, 400);
        ctx.lineTo(400, 300)
        ctx.lineWidth = 3;
        ctx.fillStyle = 'green'
        ctx.stroke(); 
        ctx.fill();

矩形

ctx.rect(x, y, dx, dy);

ctx.fillRect(x, y, dx, dy);

ctx.strokeRect(x, y, w, h);

        var oCanvas = document.getElementById('myCanvas');
        var ctx = oCanvas.getContext('2d');
        ctx.rect(100,100,100,100);
        ctx.fill();
        ctx.fillRect(100,220,100,100);
        ctx.strokeRect(100,350,100,100);

擦除
ctx.clearRect(x, y, dx, dy);
应用

    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script>
        var oCanvas = document.getElementById('myCanvas');
        var ctx = oCanvas.getContext('2d');
        var y = 50;
        function dowe(y){
            ctx.fillRect(200,y,100,100);
        }
        var timer = setInterval(function(){
            ctx.clearRect(0,0,500,500);
            dowe(y);
            y += 10;
            if(y > 400) {
                dowe(400);
                clearInterval(timer);
            }
        }, 50)

弧形
arc(x, y, r, 起始弧度, 结束弧度,弧形的方向 )

角 以弧度计，0顺时针 1逆时针

        ctx.arc(250,250,50,0,Math.PI/4,1);
        ctx.lineTo(250,250);
        ctx.lineTo(300,250)
        ctx.stroke();

圆角
ctx.moveTo(x,y)
ctx.arcTo(x1, y1, x2, y2, r)

绘制的弧线与当前点和x1,y1连线，x1,y1和x2,y2连线都相切

        ctx.moveTo(100,100);
        ctx.arcTo(250,100,250,250,50);
        ctx.stroke();

贝塞尔曲线
quadraticCurveTo(x1, y1, ex, ey) 二次贝塞尔曲线
x1,y1 控制点
ex,ey 结束点

bezierCurveTo(x1, y1, x2, y2, ex, ey) 三次贝塞尔曲线
x1,y1，x2,y2 控制点
ex,ey 结束点

坐标轴转换
translate(dx, dy) 重新映射画布上的 (0,0) 位置

scale(sx, sy)单位默认为1 缩放当前绘图
rotate(Math.PI) 旋转当前的绘图
save()
保存当前图像状态的一份拷贝
restore()
从栈中弹出存储的图形状态并恢复
setTransform(a, b, c, d, e, f) 先重置再变换单位1
参数：水平旋转、水平倾斜、垂直倾斜、垂直缩放、水平移动、垂直移动
transform(a, b, c, d, e, f) 在之前的基础上变换

填充图案
img图片保存为一个变量
img。onload = function（）{
ctx。fillStyle = ctx。createPattern(image,“repeat|repeat-x|repeat-y|no-repeat”)；
ctxfillrect（0，0，w，h）
}

渐变
createLinearGradient(x1, y1, x2, y2); 线性渐变 必须在填充渐变的区域里定义渐变, 否则 没有效果

createRadialGradient(x1, y1, r1, x2, y2, r2); 径向渐变

bg.addColorStop(区域0至1, color);

添加到填充ctx。fillStyle = 渐变内容