canvas学习笔记

html

<canvas ref="canvas" width="300" height="300"></canvas>

js

canvasInit(){
    let canvas = this.$refs.canvas;
    if(canvas.getContext) {
        let ctx = canvas.getContext('2d');

        ctx.fillRect(10,10,100,100);
        ctx.strokeRect(110, 110, 100, 100);
        ctx.clearRect(20,20,40,40);
    }
},

图形

let canvas = this.$refs.canvas;
let ctx = canvas.getContext('2d');

// 矩形(实心) [x, y, width, height]
ctx.fillRect(10,10,100,100);
// 矩形(边框) [x, y, width, height]
ctx.strokeRect(110, 110, 100, 100);
// 清除一块矩形区域 [x, y, width, height]
ctx.clearRect(20,20,40,40);
// 矩形 [x, y, width, height]
ctx.rect(10,10, 120,100);

// 创建路径，图形绘制指令指向路径
ctx.beginPath();
// 闭合路径，释放绘制指向
ctx.closePath();
// 用线条绘制图形
ctx.stroke();
// 填充图形
ctx.fill();

// 移动 [x, y]
ctx.moveTo(10, 10);
// 直线 [x, y]
ctx.lineTo(10, 10);
// 弧形 [x, y, 半径r, 开始弧度, 结束弧度, 顺时针(false)]
ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
// 二次贝塞尔曲线(曲线) [控制点x, 控制点y, 结束点x, 结束点y]
ctx.quadraticCurveTo(25,25,25,62.5);
// 三次贝塞尔曲线(曲线) [控制点1x, 控制点1y, 控制点2x, 控制点2y, 结束点x, 结束点y]
ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);

圆角矩形函数

// 圆角矩形 [ctx, 起点x, 起点y, 宽, 高, 圆角]
roundedRect(ctx, x, y, width, height, radius){
    ctx.beginPath();
    ctx.moveTo(x, y + radius);
    ctx.lineTo(x, y + height - radius);
    ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
    ctx.lineTo(x + width - radius, y + height);
    ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
    ctx.lineTo(x + width, y + radius);
    ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
    ctx.lineTo(x + radius, y);
    ctx.quadraticCurveTo(x, y, x, y + radius);
    ctx.stroke();
}

颜色

// 填充颜色
ctx.fillStyle = "#ff9700";
// 边框颜色
ctx.strokeStyle = "#ff9700";
// 透明图形(写在图形绘制的)
ctx.globalAlpha = 0.1;

// 颜色 线性渐变 [渐变起点x, 渐变起点y, 渐变结束点x, 渐变结束点y]
let lingrad = ctx.createLinearGradient(0,0,150,150);
lingrad.addColorStop(0, '#00ABEB');
lingrad.addColorStop(1, '#fff');
ctx.fillStyle = lingrad;
ctx.fillRect(10,10,130,130);
// 颜色 径向渐变 [起点x, 起点y, 半径r1, 终点x, 终点y, 半径r2]
let radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
radgrad.addColorStop(0, '#A7D30C');
radgrad.addColorStop(0.9, '#019F62');
radgrad.addColorStop(1, 'rgba(1,159,98,0)');
ctx.fillStyle = radgrad;
ctx.fillRect(0,0,150,150);

// 图片
// 创建新 image 对象，用作图案
var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
img.onload = function () {
    // 创建图案
    var ptrn = ctx.createPattern(img, 'repeat');
    ctx.fillStyle = ptrn;
    ctx.fillRect(0, 0, 150, 150);
};

// 文本阴影
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";

文本

// 填充文本
ctx.font = "20px serif";
ctx.fillText("hello world", 10, 30);

// 边框文本
ctx.font = "20px serif";
ctx.strokeText("hello world", 10, 80);

变形

// 保存当前状态
ctx.save();
// 恢复状态
ctx.restore();

// 移动: 根据当前位置 [x, y]
ctx.translate(10, 10);
// 旋转: 默认中心点 [角度]
ctx.retate(45);
// 缩放: [x缩放, y缩放]
ctx.scale(x, y);