canvas_01 基础

canvas:
<canvas canvas-id="myCanvas" id="myCanvas" style="border: 1px solid red;height: 500px;width: 500px;" />

1. 矩形
1.1 绘制矩形 fillRect(x, y, width, height)
    const ctx = uni.createCanvasContext('myCanvas');
    ctx.setFillStyle('#007AFF');
    ctx.fillRect(10, 10, 55, 50);
    ctx.draw();


1.2 绘制矩形边框 strokeRect(x, y, width, height)
    const ctx = uni.createCanvasContext('myCanvas');
    ctx.setStrokeStyle('#007AFF');
    ctx.strokeRect(10, 10, 55, 50);
    ctx.draw();


1.3 清除矩形区域 clearRect(x, y, widh, height)
    const ctx = uni.createCanvasContext('myCanvas');
    ctx.setStrokeStyle('#007AFF')
    ctx.strokeRect(10, 10, 55, 50);
    ctx.draw();

    setTimeout(() => {
        ctx.clearRect(10, 10, 55, 50);
        ctx.draw();
    }, 3000)

2. 绘制路径
    beginPath()    新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
    moveTo(x, y)   把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。
    lineTo(x, y)   绘制一条从当前位置到指定坐标(x, y)的直线
    closePath()    闭合路径之后，图形绘制命令又重新指向到上下文中
    stroke()       通过线条来绘制图形轮廓
    fill()         通过填充路径的内容区域生成实心的图形
    closePath()    关闭路径绘制


2.1 画线段
    const ctx = uni.createCanvasContext('myCanvas');
    ctx.setStrokeStyle('#007AFF');
    ctx.setLineWidth(2);

    ctx.beginPath();
    // 画直线
    ctx.moveTo(50,50);
    ctx.lineTo(200,50);
    ctx.closePath();

    ctx.stroke();
    ctx.draw();


2.2 画三角形
    const ctx = uni.createCanvasContext('myCanvas');
    ctx.setStrokeStyle('#007AFF');
    ctx.setLineWidth(2);

    ctx.beginPath();
    // 起点
    ctx.moveTo(50, 50);
    // 左斜边
    ctx.lineTo(200, 50);
    // 右斜边
    ctx.lineTo(200, 200);
    // 底边 自动闭合: closePath
    ctx.closePath();

    ctx.stroke();
    ctx.draw();


2.3 填充三角形
    const ctx = uni.createCanvasContext('myCanvas');
    ctx.setStrokeStyle('#007AFF');
    ctx.setFillStyle('#4CD964')
    ctx.setLineWidth(3);

    ctx.beginPath();
    // 起点
    ctx.moveTo(50, 50);
    // 左斜边
    ctx.lineTo(200, 50);
    // 右斜边
    ctx.lineTo(200, 200);
    // ctx.closePath(); 注视掉

    // 填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。
    ctx.fill();
    // stroke()没有此功能，所有三角形没有底边
    ctx.stroke();

    ctx.draw();


2.4 画圆弧
方法1: arc(x, y, r, startAngle, endAngle, anticlockwise):
    以(x, y) 为圆心，以r 为半径，从 startAngle 弧度开始到endAngle弧度结束。
    anticlosewise 是布尔值，true 表示逆时针，false 表示顺时针(默认是顺时针)。

    const ctx = uni.createCanvasContext('myCanvas');
    ctx.setStrokeStyle('#007AFF');
    ctx.setFillStyle('#4CD964');

    // 顺时针 0° - 90° 右半弧
    ctx.beginPath();
    ctx.arc(50, 50, 50, 0, Math.PI / 2, false);
    ctx.stroke();

    // 顺时针 0° - 180° 下半圆
    ctx.beginPath();
    ctx.arc(200, 50, 50, 0, Math.PI, false);
    ctx.stroke();


    // 顺时针 -90° - 90° 左半圆
    ctx.beginPath();
    ctx.arc(50, 200, 50, Math.PI / 2, 1.5 * Math.PI, false);
    ctx.stroke();


    // 逆时针到 0-270° 大半圆 并填充
    ctx.beginPath();
    ctx.arc(200, 200, 50, 0, -270 * Math.PI / 180, true);
    ctx.stroke(); // 没有封口 ctx.closePath()
    ctx.fill();

    ctx.draw();


方法2: arcTo(x1, y1, x2, y2, radius)
    根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。
    这个方法可以这样理解。绘制的弧形是由两条切线所决定。
    第 1 条切线：起始点和控制点1决定的直线。
    第 2 条切线：控制点1 和控制点2决定的直线。

    const ctx = uni.createCanvasContext('myCanvas');
    ctx.setStrokeStyle('#007AFF');
    ctx.setFillStyle('#4CD964');

    ctx.beginPath();
    // 起始点
    ctx.moveTo(50, 50);
    // 控制点1 控制点2，半径
    ctx.arcTo(200, 50, 200, 200, 100);
    // 控制点2
    ctx.lineTo(200, 200);
    ctx.stroke();
    ctx.fill();

    ctx.beginPath();
    ctx.setFillStyle('#007AFF');
    ctx.fillRect(50, 50, 10, 10);
    ctx.fillRect(200, 50, 10, 10);
    ctx.fillRect(200, 200, 10, 10);
    ctx.fill();

    ctx.draw();


3. 贝塞尔曲线
3.1 二次贝塞尔曲线
quadraticCurveTo(cp1x, cp1y, x, y)
    参数 1 和 2：控制点坐标
    参数 3 和 4：结束点坐标

    const ctx = uni.createCanvasContext('myCanvas');
    ctx.setStrokeStyle('#007AFF');
    ctx.setFillStyle('#4CD964');

    ctx.moveTo(10, 200); //起始点
    let cp1x = 40, cp1y = 100; //控制点
    let x = 200, y = 200; // 结束点

    //绘制二次贝塞尔曲线
    ctx.quadraticCurveTo(cp1x, cp1y, x, y);
    ctx.stroke();

    ctx.beginPath();
    ctx.fillRect(10, 200, 10, 10);
    ctx.fillRect(cp1x, cp1y, 10, 10);
    ctx.fillRect(x, y, 10, 10);
    ctx.fillRect();

    ctx.draw();


3.2 三次贝塞尔曲线:
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
    参数 1 和 2：控制点 1 的坐标
    参数 3 和 4：控制点 2 的坐标
    参数 5 和 6：结束点的坐标

    const ctx = uni.createCanvasContext('myCanvas');
    ctx.setStrokeStyle('#007AFF');
    ctx.setFillStyle('#4CD964');

    ctx.moveTo(40, 200); //起始点
    var cp1x = 20, cp1y = 100; //控制点1
    var cp2x = 100, cp2y = 120; //控制点2
    var x = 200, y = 200; //结束点
    //绘制三次贝塞尔曲线
    ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
    ctx.stroke();

    ctx.beginPath();
    ctx.fillRect(40, 200, 10, 10);
    ctx.fillRect(cp1x, cp1y, 10, 10);
    ctx.fillRect(cp2x, cp2y, 10, 10);
    ctx.fillRect(x, y, 10, 10);
    ctx.fill();

    ctx.draw();


4. 样式和颜色
fillStyle = color 设置图形的填充颜色
strokeStyle = color 设置图形轮廓的颜色
一旦设置了 strokeStyle 或者 fillStyle 的值，那么这个新值就会成为新绘制的图形的默认值。
如果你要给每个图形上不同的颜色，你需要重新设置 fillStyle 或 strokeStyle 的值。


4.1 fillStyle 设置图形的填充颜色
    const ctx = uni.createCanvasContext('myCanvas');

    for (let i = 0; i < 6; i++) {
        for (let j = 0; j < 6; j++) {
            ctx.setFillStyle('rgb(' + Math.floor(255 - 42.5 * i) + ',' + Math.floor(255 - 42.5 * j) + ',0)');
            ctx.fillRect(j * 50, i * 50, 50, 50);
        }
    }

    ctx.draw();


4.2 strokeStyle 边框颜色
    // 函数是在 uni-app 的 methods 中
    randomInt(from, to) {
        return parseInt(Math.random() * (to - from + 1) + from);
    },
    draw() {
        /*
        Math.ceil(Math.random()*10);     // 获取从 1 到 10 的随机整数，取 0 的概率极小。

        Math.round(Math.random());       // 可均衡获取 0 到 1 的随机整数。

        Math.floor(Math.random()*10);    // 可均衡获取 0 到 9 的随机整数。

        Math.round(Math.random()*10);    // 基本均衡获取 0 到 10 的随机整数，其中获取最小值 0 和最大值 10 的几率少一半。

        parseInt(string, radix)          // 函数可解析一个字符串，并返回一个整数，小数则则只取整数部分
        */

        const ctx = uni.createCanvasContext('myCanvas');
        for (let i = 0; i < 6; i++) {
            for (let j = 0; j < 6; j++) {
                let col = `rgb(${this.randomInt(0, 255)},${this.randomInt(0, 255)},${this.randomInt(0, 255)})`;
                ctx.setStrokeStyle(col);
                ctx.strokeRect(j * 50, i * 50, 40, 40);
            }
        }
        ctx.draw();
    }


4.3 lineCap = type
    butt：线段末端以方形结束
    round：线段末端以圆形结束
    square：线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。

    const ctx = uni.createCanvasContext('myCanvas');
    const lineCaps = ["butt", "round", "square"];
    for (let i = 0; i < 3; i++) {
        ctx.beginPath();
        ctx.moveTo(20 + 30 * i, 30);
        ctx.lineTo(20 + 30 * i, 100);
        ctx.lineWidth = 20;
        ctx.setLineCap(lineCaps[i]);
        ctx.stroke();
    }

    ctx.beginPath();
    ctx.moveTo(0, 30);
    ctx.lineTo(300, 30);

    ctx.moveTo(0, 100);
    ctx.lineTo(300, 100)

    ctx.strokeStyle = "red";
    ctx.lineWidth = 1;
    ctx.stroke();

    ctx.draw();


4.4 lineJoin = type 同一个 path 内，设定线条与线条间接合处的样式
    round 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。
    bevel 在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。
    miter(默认) 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。


    const ctx = uni.createCanvasContext('myCanvas');
    ctx.lineWidth = 20;
    const lineJoin = ['round', 'bevel', 'miter'];
    for (let i = 0; i < lineJoin.length; i++) {
        ctx.setLineJoin(lineJoin[i]);
        ctx.beginPath();
        ctx.moveTo(50, 50 + i * 50);
        ctx.lineTo(100, 100 + i * 50);
        ctx.lineTo(150, 50 + i * 50);
        ctx.lineTo(200, 100 + i * 50);
        ctx.lineTo(250, 50 + i * 50);
        ctx.stroke();
    }

    ctx.draw();


4.5 虚线 setLineDash [实线长度, 间隙长度]
        lineDashOffset 大于0 逆时针，小于0，顺时针

    const ctx = uni.createCanvasContext('myCanvas');

    ctx.setLineDash([20, 5]); // [实线长度, 间隙长度]
    let i = 0;
    let timer = setInterval((str) => {
        i < 100 ? i++ : i = 0;
        console.log(str + String(i));
        ctx.lineDashOffset = i;
        ctx.strokeRect(50, 50, 210, 210);
        ctx.draw();
    }, 50, '偏移量是\t')

    setTimeout(() => {
        clearInterval(timer);
    }, 6000)


5. 绘制文本
fillText(text, x, y [, maxWidth])    在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的。
strokeText(text, x, y [, maxWidth])  在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的。

font = value           当前我们用来绘制文本的样式。这个字符串使用和 CSS font 属性相同的语法。 默认的字体是 10px sans-serif。
textAlign = value      文本对齐选项。 可选的值包括：start, end, left, right or center。 默认值是 start。
textBaseline = value   基线对齐选项，可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。。
direction = value      文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。

    const ctx = uni.createCanvasContext('myCanvas');

    ctx.font = "italic bold 100px cursive";
    ctx.fillText("天若有情", 10, 100);
    ctx.strokeText("天若有情", 10, 200);

    ctx.draw();

    // 获取文本宽度
    const metrics = ctx.measureText('天若有情');
    console.log(metrics);


6. 绘制图片 有三个版本的写法：
    drawImage(dx, dy)
    drawImage(dx, dy, dWidth, dHeight)
    drawImage(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)


6.1 基础绘制
    drawImage(image, x, y, width, height)
        image: 地址
        x,y: 起始位置(图片的右上角)
        width,height: 拉伸或缩放到指定尺寸

    const ctx = uni.createCanvasContext('myCanvas');
    let imgSrc = "/static/logo.png";
    ctx.drawImage(imgSrc, 10, 10, 100, 100);
    ctx.draw();


6.2 图片切片
    drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
    除了image,前 4 个是定义图像源的切片位置和大小，后 4 个则是定义切片的目标显示位置和大小。

    const ctx = uni.createCanvasContext('myCanvas');

    let imgSrc = "/static/logo.png";
    ctx.drawImage(imgSrc, 10, 10, 100, 100);
    ctx.drawImage(imgSrc, 10, 10, 100, 100, 120, 10, 100, 100);

    ctx.draw();


7. save 和 restore
    save() ：Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。
        一个绘画状态包括：
        a. 当前应用的变形（即移动，旋转和缩放）
        b. strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX,
           shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值
        c. 当前的裁切路径（clipping path）
        # 可以调用任意多次 save方法(类似数组的 push())。

restore()：每一次调用 restore 方法，上一个保存的状态就从栈中弹出，所有设定都恢复(类似数组的 pop())。

    const ctx = uni.createCanvasContext('myCanvas');

    ctx.fillRect(10, 10, 150, 150); // 使用默认设置绘制一个矩形
    ctx.save(); // 保存默认状态 black

    ctx.setFillStyle('red'); // 在原有配置基础上对颜色做改变
    ctx.fillRect(25, 25, 120, 120); // 使用新的设置绘制一个矩形

    ctx.save(); // 保存当前状态 red
    ctx.setFillStyle('#FFFFFF'); // 再次改变颜色配置
    ctx.fillRect(40, 40, 90, 90); // 使用新的配置绘制一个矩形

    ctx.restore(); // 重新加载之前的颜色状态 red
    ctx.fillRect(55, 55, 60, 60); // 使用上一次的配置绘制一个矩形

    ctx.restore(); // 加载默认颜色配置 black
    ctx.fillRect(70, 70, 30, 30); // 使用加载的配置绘制一个矩形

    ctx.draw();


8. 变形
8.1 translate(x, y) 用来移动 canvas 的原点到指定的位置
    translate 移动的是 canvas 的坐标原点(坐标变换)。

    const ctx = uni.createCanvasContext('myCanvas');

    ctx.save(); //保存坐原点平移之前的状态,要不然会以 (100,100)为坐标原点
    ctx.translate(100, 100);
    ctx.strokeRect(0, 0, 100, 100);
    ctx.restore(); //恢复到最初状态
    ctx.translate(220, 220);
    ctx.fillRect(0, 0, 100, 100);

    ctx.draw();


8.2 rotate(angle) 旋转坐标轴
    const ctx = uni.createCanvasContext('myCanvas');

    ctx.fillStyle = "red";
    ctx.save();

    ctx.translate(100, 100);
    ctx.setFillStyle('blue');
    ctx.setStrokeStyle('blue');
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(90, 0);
    ctx.stroke();
    ctx.rotate(15 * Math.PI / 180);
    ctx.fillRect(0, 0, 100, 100);

    ctx.restore(); // 还原 原点
    ctx.fillRect(0, 0, 100, 100)

    ctx.draw();


8.3 scale(x, y) 增减图形在 canvas 中的像素数目，对形状，位图进行缩小或者放大
x,y 分别是横轴和纵轴的缩放因子，它们都必须是正值。值比 1.0 小表示缩 小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。

    const ctx = uni.createCanvasContext('myCanvas');

    ctx.setFillStyle('blue');
    ctx.fillRect(10, 10, 100, 100);
    ctx.scale(1,2);
    // y 和 ylen 都会扩大2倍
    ctx.fillRect(120, 5, 100, 50);

    ctx.draw();

8.4 transform(a, b, c, d, e, f) 变形矩阵
    a  c  e
    b  d  f
    0  0  1
    a    水平缩放绘图
    b    水平倾斜绘图
    c    垂直倾斜绘图
    d    垂直缩放绘图
    e    水平移动绘图
    f    垂直移动绘图

    const ctx = uni.createCanvasContext('myCanvas');
    ctx.beginPath();
    ctx.setStrokeStyle('blue');
    ctx.moveTo(100, 100);
    ctx.lineTo(300, 100);
    ctx.moveTo(100, 100);
    ctx.lineTo(100, 300);
    ctx.stroke();
    // a,d 水平、垂直都不缩放 1
    // b,c 水平、垂直 倾斜
    // e,f 水平、垂直 移动
    ctx.transform(1, 0, 0, 1, 10, 10);
    ctx.fillRect(100, 100, 100, 100);

    ctx.draw();


9. 合成 globalCompositeOperation = type
    H5: source-over、destination-over、source-in、destination-in、source-out、destination-out、
        source-atop、destination-atop、lighter、darker、xor、copy

    const ctx = uni.createCanvasContext('myCanvas');

    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, 200, 200);

    ctx.globalCompositeOperation = "source-in"; //全局合成操作
    ctx.fillStyle = "red";
    ctx.fillRect(100, 100, 200, 200);

    ctx.draw();

source-in:
    仅仅会出现新图像与原来图像重叠的部分，其他区域都变成透明的。(包括其他的老图像区域也会透明)

source-out:
    仅仅显示新图像与老图像没有重叠的部分，其余部分全部透明。(老图像也不显示):

source-atop：
    新图像仅仅显示与老图像重叠区域。老图像仍然可以显示，重叠区域在上面哦

destination-over：
    新图像会在老图像的下面

destination-in:
    仅仅新老图像重叠部分的老图像被显示，其他区域全部透明。

destination-out:
    仅仅老图像与新图像没有重叠的部分, 注意显示的是老图像的部分区域。


destination-atop:
    老图像仅仅仅仅显示重叠部分，新图像会显示在老图像的下面。

lighter:
    新老图像都显示，但是重叠区域的颜色做加处理。

darken:
    保留重叠部分最黑的像素。(每个颜色位进行比较，得到最小的)
    blue:           #0000ff
    red:            #ff0000
    所以重叠部分的颜色：#000000。

lighten:
    保证重叠部分最量的像素。(每个颜色位进行比较，得到最大的)
    blue:           #0000ff
    red:            #ff0000
    所以重叠部分的颜色：#ff00ff。

xor:
    重叠部分会变成透明。

copy:
    只有新图像会被保留，其余的全部被清除(边透明)。


10. 裁剪路径 clip()
    把已经创建的路径转换成裁剪路径。
    裁剪路径的作用是遮罩。只显示裁剪路径内的区域，裁剪路径外的区域会被隐藏。
    注意：clip() 只能遮罩在这个方法调用之后绘制的图像，如果是 clip() 方法调用之前绘制的图像，则无法实现遮罩

    const ctx = uni.createCanvasContext('myCanvas');

    ctx.beginPath();
    ctx.arc(100, 100, 70, 0, Math.PI * 2);
    ctx.fill();

    ctx.clip();
    ctx.setFillStyle('#FFFFFF');
    ctx.fillRect(100, 100, 70, 70);

    ctx.draw();


11. 动画