canvas: <canvas canvas-id="myCanvas" id="myCanvas" style="border: 1px solid red;height: 500px; 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, '偏移量是 ') 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. 动画