From 72af38f57f3c260fa6f77f0bc129b3a9a842dc2d Mon Sep 17 00:00:00 2001 From: Anne_LXM Date: Thu, 22 Sep 2022 20:17:28 +0800 Subject: [PATCH] Update CanvasContext.md --- docs/api/canvas/CanvasContext.md | 2892 +++++++++++++++--------------- 1 file changed, 1446 insertions(+), 1446 deletions(-) diff --git a/docs/api/canvas/CanvasContext.md b/docs/api/canvas/CanvasContext.md index 8e71ad60c..5d10349c6 100644 --- a/docs/api/canvas/CanvasContext.md +++ b/docs/api/canvas/CanvasContext.md @@ -1,1446 +1,1446 @@ -**属性** - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|QQ小程序|快手小程序|京东小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√|√|√|√|√|√|√|√|√| - -App-nvue下如需使用canvas，暂未封装为uni API，可参考[文档](https://github.com/dcloudio/NvueCanvasDemo)使用。 - -### CanvasContext.fillStyle string - -填充颜色。用法同 [CanvasContext.setFillStyle()](#canvascontextsetfillstyle)。 - -### CanvasContext.strokeStyle string - -边框颜色。用法同 [CanvasContext.setStrokeStyle()](#canvascontextsetstrokestyle)。 - -### CanvasContext.shadowOffsetX number - -阴影相对于形状在水平方向的偏移 - -### CanvasContext.shadowOffsetY number - -阴影相对于形状在竖直方向的偏移 - -### CanvasContext.shadowColor number - -阴影的颜色 - -### CanvasContext.shadowBlur number - -阴影的模糊级别 - -### CanvasContext.lineWidth number - -线条的宽度。用法同 [CanvasContext.setLineWidth()](#canvascontextsetlinewidth)。 - -### CanvasContext.lineCap number - -线条的端点样式。用法同 [CanvasContext.setLineCap()](#canvascontextsetlinecap)。 - -### CanvasContext.lineJoin number - -线条的交点样式。用法同 [CanvasContext.setLineJoin()](#canvascontextsetlinejoin)。 - -### CanvasContext.miterLimit number - -最大斜接长度。用法同 [CanvasContext.setMiterLimit()](#canvascontextsetmiterlimit)。 - -### CanvasContext.lineDashOffset number - -虚线偏移量，初始值为0 - -### CanvasContext.font string - -当前字体样式的属性。符合 [CSS font 语法](https://developer.mozilla.org/zh-CN/docs/Web/CSS/font) 的 DOMString 字符串，至少需要提供字体大小和字体族名。默认值为 10px sans-serif。 - -### CanvasContext.globalAlpha number - -全局画笔透明度。范围 0-1，0 表示完全透明，1 表示完全不透明。 - -### CanvasContext.globalCompositeOperation string - -在绘制新形状时应用的合成操作的类型。目前安卓版本只适用于 `fill` 填充块的合成，用于 `stroke` 线段的合成效果都是 `source-over`。 - -目前支持的操作有 -* App和H5端：source-over、destination-over、source-in、destination-in、source-out、destination-out、source-atop、destination-atop、lighter、darker、xor、copy -* 微信小程序安卓端：xor, source-over, source-atop, destination-out, lighter, overlay, darken, lighten, hard-light -* 微信小程序iOS端：xor, source-over, source-atop, destination-over, destination-out, lighter, multiply, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, saturation, luminosity - -**方法** - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|京东小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√|√|√|√|√|√|√| - -### CanvasContext.arc - -画一条弧线。创建一个圆可以用 ```arc()``` 方法指定起始弧度为0，终止弧度为 ```2 * Math.PI```。用 ```stroke()``` 或者 ```fill()``` 方法来在 ```canvas``` 中画弧线。 - -**参数** - -|参数|类型 |说明| -|---|--- |--- | -|x |Number |圆的x坐标 | -|y |Number |圆的y坐标| -|r|Number |圆的半径| -|sAngle |Number |起始弧度，单位弧度（在3点钟方向）| -|eAngle |Number |终止弧度| -|counterclockwise |Boolean|可选。指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针。| - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -// Draw coordinates -ctx.arc(100, 75, 50, 0, 2 * Math.PI) -ctx.setFillStyle('#EEEEEE') -ctx.fill() - -ctx.beginPath() -ctx.moveTo(40, 75) -ctx.lineTo(160, 75) -ctx.moveTo(100, 15) -ctx.lineTo(100, 135) -ctx.setStrokeStyle('#AAAAAA') -ctx.stroke() - -ctx.setFontSize(12) -ctx.setFillStyle('black') -ctx.fillText('0', 165, 78) -ctx.fillText('0.5*PI', 83, 145) -ctx.fillText('1*PI', 15, 78) -ctx.fillText('1.5*PI', 83, 10) - -// Draw points -ctx.beginPath() -ctx.arc(100, 75, 2, 0, 2 * Math.PI) -ctx.setFillStyle('lightgreen') -ctx.fill() - -ctx.beginPath() -ctx.arc(100, 25, 2, 0, 2 * Math.PI) -ctx.setFillStyle('blue') -ctx.fill() - -ctx.beginPath() -ctx.arc(150, 75, 2, 0, 2 * Math.PI) -ctx.setFillStyle('red') -ctx.fill() - -// Draw arc -ctx.beginPath() -ctx.arc(100, 75, 50, 0, 1.5 * Math.PI) -ctx.setStrokeStyle('#333333') -ctx.stroke() - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/687c12e0-4f28-11eb-bdc1-8bd33eb6adaa.png) - -针对 ```arc(100, 75, 50, 0, 1.5 * Math.PI)```的三个关键坐标如下： -* 绿色: 圆心 (100, 75) -* 红色: 起始弧度 (0) -* 蓝色: 终止弧度 (1.5 * Math.PI) - -### CanvasContext.arcTo - -根据控制点和半径绘制圆弧路径。 - -```javascript -CanvasContext.arcTo(x1, y1, x2, y2, radius) -``` - -**参数** - -|属性值 |类型 |说明| -|--- |--- |--- | -|x1|Number |第一个控制点的 x 轴坐标| -|y1|Number |第一个控制点的 y 轴坐标| -|x2|Number |第二个控制点的 x 轴坐标| -|y2|Number |第二个控制点的 y 轴坐标| -|radius |Number |圆弧的半径 | - -### CanvasContext.beginPath - -开始创建一个路径，需要调用fill或者stroke才会使用路径进行填充或描边。 - -**Tip:** 在最开始的时候相当于调用了一次 ```beginPath()```。 -**Tip:** 同一个路径内的多次```setFillStyle()```、``setStrokeStyle()```、```setLineWidth()```等设置，以最后一次设置为准。 - - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -// begin path -ctx.rect(10, 10, 100, 30) -ctx.setFillStyle('yellow') -ctx.fill() - -// begin another path -ctx.beginPath() -ctx.rect(10, 40, 100, 30) - -// only fill this rect, not in current path -ctx.setFillStyle('blue') -ctx.fillRect(10, 70, 100, 30) - -ctx.rect(10, 100, 100, 30) - -// it will fill current path -ctx.setFillStyle('red') -ctx.fill() -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1b5714b0-4f28-11eb-8a36-ebb87efcf8c0.png) -### CanvasContext.bezierCurveTo - -创建三次方贝塞尔曲线路径。 - -**Tip:** 曲线的起始点为路径中前一个点。 - -**参数** - -|参数 |类型 |说明| -|--- |--- |---| -|cp1x |Number |第一个贝塞尔控制点的 x 坐标| -|cp1y |Number |第一个贝塞尔控制点的 y 坐标| -|cp2x |Number |第二个贝塞尔控制点的 x 坐标| -|cp2y |Number |第二个贝塞尔控制点的 y 坐标| -|x|Number |结束点的 x 坐标| -|y|Number |结束点的 y 坐标| - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -// Draw points -ctx.beginPath() -ctx.arc(20, 20, 2, 0, 2 * Math.PI) -ctx.setFillStyle('red') -ctx.fill() - -ctx.beginPath() -ctx.arc(200, 20, 2, 0, 2 * Math.PI) -ctx.setFillStyle('lightgreen') -ctx.fill() - -ctx.beginPath() -ctx.arc(20, 100, 2, 0, 2 * Math.PI) -ctx.arc(200, 100, 2, 0, 2 * Math.PI) -ctx.setFillStyle('blue') -ctx.fill() - -ctx.setFillStyle('black') -ctx.setFontSize(12) - -// Draw guides -ctx.beginPath() -ctx.moveTo(20, 20) -ctx.lineTo(20, 100) -ctx.lineTo(150, 75) - -ctx.moveTo(200, 20) -ctx.lineTo(200, 100) -ctx.lineTo(70, 75) -ctx.setStrokeStyle('#AAAAAA') -ctx.stroke() - -// Draw quadratic curve -ctx.beginPath() -ctx.moveTo(20, 20) -ctx.bezierCurveTo(20, 100, 200, 100, 200, 20) -ctx.setStrokeStyle('black') -ctx.stroke() - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/03cf3750-4f28-11eb-b997-9918a5dda011.png) - -针对 ```moveTo(20, 20)`` ```bezierCurveTo(20, 100, 200, 100, 200, 20)``` 的三个关键坐标如下： - -* 红色：起始点(20, 20) -* 蓝色：两个控制点(20, 100) (200, 100) -* 绿色：终止点(200, 20) - -### CanvasContext.clearRect - -清除画布上在该矩形区域内的内容。 - - -**参数** - -|参数|类型|说明| -|--- |--- |--- | -|x |Number |矩形区域左上角的x坐标| -|y |Number |矩形区域左上角的y坐标| -|width |Number |矩形区域的宽度| -|height |Number |矩形区域的高度| - -**示例代码** - -clearRect 并非画一个白色的矩形在地址区域，而是清空，为了有直观感受，对 canvas 加了一层背景色。 - -```javascript - -``` - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.setFillStyle('red') -ctx.fillRect(0, 0, 150, 200) -ctx.setFillStyle('blue') -ctx.fillRect(150, 0, 150, 200) -ctx.clearRect(10, 10, 150, 75) -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/05afde30-4f28-11eb-a16f-5b3e54966275.png) - - -### CanvasContext.clip -从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。 - -**Tip:** 用 setFillStroke() 设置矩形线条的颜色，如果没设置默认是黑色。 - - -**示例代码** - -```javascript -const context = uni.createCanvasContext('myCanvas') - -uni.downloadFile({ - url: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png', - success: function (res) { -context.save() -context.beginPath() -context.arc(96, 96, 48, 0, 2 * Math.PI) -context.clip() -context.drawImage(res.tempFilePath, 48, 48) - context.restore() - context.draw() - } -}) - -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/067a3310-4f28-11eb-b997-9918a5dda011.png) - -### CanvasContext.closePath -关闭一个路径。 - -**Tip:** 关闭路径会连接起点和终点。 -**Tip:** 如果关闭路径后没有调用 ```fill()``` 或者 ```stroke()``` 并开启了新的路径，那之前的路径将不会被渲染。 - - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.moveTo(10, 10) -ctx.lineTo(100, 10) -ctx.lineTo(100, 100) -ctx.closePath() -ctx.stroke() -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/074e9a10-4f28-11eb-8a36-ebb87efcf8c0.png) - - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -// begin path -ctx.rect(10, 10, 100, 30) -ctx.closePath() - -// begin another path -ctx.beginPath() -ctx.rect(10, 40, 100, 30) - -// only fill this rect, not in current path -ctx.setFillStyle('blue') -ctx.fillRect(10, 70, 100, 30) - -ctx.rect(10, 100, 100, 30) - -// it will fill current path -ctx.setFillStyle('red') -ctx.fill() -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/02d34b20-4f28-11eb-b680-7980c8a877b8.png) - -### CanvasContext.createCircularGradient -创建一个从圆心开始的渐变。返回的 [CanvasGradient](/api/canvas/CanvasGradient) 对象，需要使用 ```CanvasGradient.addColorStop()``` 来指定渐变点，至少要两个。 - -**参数** - -|参数 |类型 |定义 | -|--- |--- |--- | -|x |Number |圆心的x坐标| -|y |Number |圆心的y坐标| -|r |Number |圆的半径 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -// Create circular gradient -const grd = ctx.createCircularGradient(75, 50, 50) -grd.addColorStop(0, 'red') -grd.addColorStop(1, 'white') - -// Fill with gradient -ctx.setFillStyle(grd) -ctx.fillRect(10, 10, 150, 80) -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/04c3f790-4f28-11eb-8a36-ebb87efcf8c0.png) - -### CanvasContext.createLinearGradient -创建一个线性的渐变颜色。返回的 [CanvasGradient](/api/canvas/CanvasGradient) 对象，需要使用 ```CanvasGradient.addColorStop()``` 来指定渐变点，至少要两个。 - -**参数** - -|参数 |类型 |定义 | -|--- |--- |--- | -|x0 |Number |起点的x坐标| -|y0 |Number |起点的y坐标| -|x1 |Number |终点的x坐标| -|y1 |Number |终点的y坐标| - - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -// Create linear gradient -const grd = ctx.createLinearGradient(0, 0, 200, 0) -grd.addColorStop(0, 'red') -grd.addColorStop(1, 'white') - -// Fill with gradient -ctx.setFillStyle(grd) -ctx.fillRect(10, 10, 150, 80) -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/24a94010-4f28-11eb-bdc1-8bd33eb6adaa.png) - -### CanvasContext.createPattern -对指定的图像创建模式的方法，可在指定的方向上重复元图像 - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|image |String |重复的图像源，仅支持包内路径和临时路径 | -|repetition |String |指定如何重复图像，有效值有: repeat, repeat-x, repeat-y, no-repeat | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -const pattern = ctx.createPattern('/path/to/image', 'repeat-x') -ctx.fillStyle = pattern -ctx.fillRect(0, 0, 300, 150) -ctx.draw() -``` - -### CanvasContext.draw -将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。 - -**参数** - -|参数|类型|说明|最低版本 | -|---|---|---|---| -|reserve |Boolean |非必填。本次绘制是否接着上一次绘制，即reserve参数为false，则在本次调用drawCanvas绘制之前native层应先清空画布再继续绘制；若reserver参数为true，则保留当前画布上的内容，本次调用drawCanvas绘制的内容覆盖在上面，默认 false | | -|callback |Function |绘制完成后回调|1.7.0| - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -ctx.setFillStyle('red') -ctx.fillRect(10, 10, 150, 100) -ctx.draw() -ctx.fillRect(50, 50, 150, 100) -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/33d7d100-4f28-11eb-97b7-0dc4655d6e68.png) - - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -ctx.setFillStyle('red') -ctx.fillRect(10, 10, 150, 100) -ctx.draw() -ctx.fillRect(50, 50, 150, 100) -ctx.draw(true) -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2ad88090-4f28-11eb-8ff1-d5dcf8779628.png) - -### CanvasContext.drawImage -绘制图像到画布。 - -**参数** - -|参数|类型 |说明 | -|--- |---|--- | -|imageResource |String |所要绘制的图片资源 | -|dx |Number |图像的左上角在目标canvas上 X 轴的位置 | -|dy |Number |图像的左上角在目标canvas上 Y 轴的位置 | -|dWidth|Number |在目标画布上绘制图像的宽度，允许对绘制的图像进行缩放 | -|dHeight|Number |在目标画布上绘制图像的高度，允许对绘制的图像进行缩放 | -|sx |Number |源图像的矩形选择框的左上角 X 坐标 | -|sy |Number |源图像的矩形选择框的左上角 Y 坐标 | -|sWidth|Number |源图像的矩形选择框的宽度 | -|sHeight |Number |源图像的矩形选择框的高度 | - -有三个版本的写法： - -* ```drawImage(dx, dy)``` -* ```drawImage(dx, dy, dWidth, dHeight)``` -* ```drawImage(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)``` - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -uni.chooseImage({ - success: function(res){ - ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100) - ctx.draw() - } -}) -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1946d250-4f28-11eb-8a36-ebb87efcf8c0.png) - -### CanvasContext.fill -对当前路径中的内容进行填充。默认的填充色为黑色。 - -**Tip:** 如果当前路径没有闭合，```fill()``` 方法会将起点和终点进行连接，然后填充，详情见例一。 - -**Tip:** ```fill()``` 填充的的路径是从 ```beginPath()``` 开始计算，但是不会将 ```fillRect()``` 包含进去，详情见例二。 - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.moveTo(10, 10) -ctx.lineTo(100, 10) -ctx.lineTo(100, 100) -ctx.fill() -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1a366270-4f28-11eb-a16f-5b3e54966275.png) - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -// begin path -ctx.rect(10, 10, 100, 30) -ctx.setFillStyle('yellow') -ctx.fill() - -// begin another path -ctx.beginPath() -ctx.rect(10, 40, 100, 30) - -// only fill this rect, not in current path -ctx.setFillStyle('blue') -ctx.fillRect(10, 70, 100, 30) - -ctx.rect(10, 100, 100, 30) - -// it will fill current path -ctx.setFillStyle('red') -ctx.fill() -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1b5714b0-4f28-11eb-8a36-ebb87efcf8c0.png) - -### CanvasContext.fillRect -填充一个矩形。 - -**Tip:** 用 ```setFillStyle()``` 设置矩形的填充色，如果没设置默认是黑色。 - -**参数** - -|参数 |类型 |定义 | -|--- |--- |--- | -|x |Number |矩形路径左上角的x坐标 | -|y |Number |矩形路径左上角的y坐标 | -|width |Number |矩形路径的宽度 | -|height |Number |矩形路径的高度 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.setFillStyle('red') -ctx.fillRect(10, 10, 150, 75) -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1c4656b0-4f28-11eb-a16f-5b3e54966275.png) - -### CanvasContext.fillText -在画布上绘制被填充的文本。 - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|text |String |在画布上输出的文本 | -|x |Number |绘制文本的左上角x坐标位置 | -|y |Number |绘制文本的左上角y坐标位置 | -|maxWidth |Number |需要绘制的最大宽度，可选 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -ctx.setFontSize(20) -ctx.fillText('Hello', 20, 20) -ctx.fillText('MINA', 100, 100) - -ctx.draw() -``` - - -### CanvasContext.lineTo -增加一个新点，然后创建一条从上次指定点到目标点的线。 - -**Tip:** 用 ```stroke()``` 方法来画线条 - -**参数** - -|参数 |类型|说明 | -|--- |--- |--- | -|x |Number |目标位置的x坐标| -|y |Number |目标位置的y坐标| - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.moveTo(10, 10) -ctx.rect(10, 10, 100, 50) -ctx.lineTo(110, 60) -ctx.stroke() -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/27097730-4f28-11eb-bdc1-8bd33eb6adaa.png) - -### CanvasContext.measureText -测量文本尺寸信息，目前仅返回文本宽度。同步接口。（App 端 2.8.12+ 支持） - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|text |String |要测量的文本 | - -**返回** - -返回 ```TextMetrics``` 对象，结构如下： - -|参数 |类型 |说明 | -|--- |--- |--- | -|width |Number |文本的宽度 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.font = 'italic bold 20px cursive' -const metrics = ctx.measureText('Hello World') -console.log(metrics.width) -``` - -### CanvasContext.moveTo -把路径移动到画布中的指定点，不创建线条。用 ```stroke()``` 方法来画线条。 - -**参数** - -|参数 |类型|说明 | -|--- |--- |--- | -|x |Number |目标位置的x坐标| -|y |Number |目标位置的y坐标| - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.moveTo(10, 10) -ctx.lineTo(100, 10) - -ctx.moveTo(10, 50) -ctx.lineTo(100, 50) -ctx.stroke() -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2945d2a0-4f28-11eb-bdc1-8bd33eb6adaa.png) - -### CanvasContext.quadraticCurveTo -创建二次贝塞尔曲线路径。曲线的起始点为路径中前一个点。 - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|cpx |Number |贝塞尔控制点的x坐标| -|cpy |Number |贝塞尔控制点的y坐标| -|x |Number |结束点的x坐标 | -|y |Number |结束点的y坐标 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -// Draw points -ctx.beginPath() -ctx.arc(20, 20, 2, 0, 2 * Math.PI) -ctx.setFillStyle('red') -ctx.fill() - -ctx.beginPath() -ctx.arc(200, 20, 2, 0, 2 * Math.PI) -ctx.setFillStyle('lightgreen') -ctx.fill() - -ctx.beginPath() -ctx.arc(20, 100, 2, 0, 2 * Math.PI) -ctx.setFillStyle('blue') -ctx.fill() - -ctx.setFillStyle('black') -ctx.setFontSize(12) - -// Draw guides -ctx.beginPath() -ctx.moveTo(20, 20) -ctx.lineTo(20, 100) -ctx.lineTo(200, 20) -ctx.setStrokeStyle('#AAAAAA') -ctx.stroke() - -// Draw quadratic curve -ctx.beginPath() -ctx.moveTo(20, 20) -ctx.quadraticCurveTo(20, 100, 200, 20) -ctx.setStrokeStyle('black') -ctx.stroke() - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2a0a0d00-4f28-11eb-bd01-97bc1429a9ff.png) - -针对 ```moveTo(20, 20)`` ```quadraticCurveTo(20, 100, 200, 20)``` 的三个关键坐标如下： - -* 红色：起始点(20, 20) -* 蓝色：控制点(20, 100) -* 绿色：终止点(200, 20) - -### CanvasContext.rect -创建一个矩形。 - -**Tip:** 用 fill() 或者 stroke() 方法将矩形真正的画到 canvas 中。 - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|x |Number |矩形路径左上角的x坐标 | -|y |Number |矩形路径左上角的y坐标 | -|width |Number |矩形路径的宽度 | -|height |Number |矩形路径的高度 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.rect(10, 10, 150, 75) -ctx.setFillStyle('red') -ctx.fill() -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1c4656b0-4f28-11eb-a16f-5b3e54966275.png) - -### CanvasContext.restore -恢复之前保存的绘图上下文。 - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -// save the default fill style -ctx.save() -ctx.setFillStyle('red') -ctx.fillRect(10, 10, 150, 100) - -// restore to the previous saved state -ctx.restore() -ctx.fillRect(50, 50, 150, 100) - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2c8d0e60-4f28-11eb-8ff1-d5dcf8779628.png) - -### CanvasContext.rotate -以原点为中心，原点可以用 translate方法修改。顺时针旋转当前坐标轴。多次调用rotate，旋转的角度会叠加。 - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|rotate |Number |旋转角度，以弧度计(degrees * Math.PI/180；degrees范围为0~360) | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -ctx.strokeRect(100, 10, 150, 100) -ctx.rotate(20 * Math.PI / 180) -ctx.strokeRect(100, 10, 150, 100) -ctx.rotate(20 * Math.PI / 180) -ctx.strokeRect(100, 10, 150, 100) - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2bbd8960-4f28-11eb-bd01-97bc1429a9ff.png) - -### CanvasContext.save -保存当前的绘图上下文。 - -**示例代码** - -```javascript -const ctx = wx.createCanvasContext('myCanvas') - -// save the default fill style -ctx.save() -ctx.setFillStyle('red') -ctx.fillRect(10, 10, 150, 100) - -// restore to the previous saved state -ctx.restore() -ctx.fillRect(50, 50, 150, 100) - -ctx.draw() -``` - -### CanvasContext.scale -在调用```scale```方法后，之后创建的路径其横纵坐标会被缩放。多次调用```scale```，倍数会相乘。 - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|scaleWidth |Number |横坐标缩放的倍数 (1 = 100%，0.5 = 50%，2 = 200%) | -|scaleHeight|Number |纵坐标轴缩放的倍数 (1 = 100%，0.5 = 50%，2 = 200%) | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -ctx.strokeRect(10, 10, 25, 15) -ctx.scale(2, 2) -ctx.strokeRect(10, 10, 25, 15) -ctx.scale(2, 2) -ctx.strokeRect(10, 10, 25, 15) - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2d528140-4f28-11eb-8ff1-d5dcf8779628.png) - -### CanvasContext.setFillStyle -设置填充色，如果没有设置 fillStyle，默认颜色为 black。 - -**语法** - -```javascript -canvasContext.setFillStyle(color) -canvasContext.fillStyle = color -``` - -**参数** - -|参数 |类型|定义 |说明| -|---|---|---|---| -|color|Color|Gradient Object|填充色 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.setFillStyle('red') -ctx.fillRect(10, 10, 150, 75) -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1c4656b0-4f28-11eb-a16f-5b3e54966275.png) - -### CanvasContext.setFontSize -设置字体的字号。 - -|参数 |类型 |说明 | -|--- |--- |--- | -|fontSize |Number |字体的字号| - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -ctx.setFontSize(20) -ctx.fillText('20', 20, 20) -ctx.setFontSize(30) -ctx.fillText('30', 40, 40) -ctx.setFontSize(40) -ctx.fillText('40', 60, 60) -ctx.setFontSize(50) -ctx.fillText('50', 90, 90) - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1855bb90-4f28-11eb-a16f-5b3e54966275.png) - - -### CanvasContext.setGlobalAlpha -设置全局画笔透明度。 - -**参数** - -|参数 |类型 |范围|说明 | -|--- |--- |--- |--- | -|alpha |Number |0~1 |透明度，0 表示完全透明，1 表示完全不透明 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -ctx.setFillStyle('red') -ctx.fillRect(10, 10, 150, 100) -ctx.setGlobalAlpha(0.2) -ctx.setFillStyle('blue') -ctx.fillRect(50, 50, 150, 100) -ctx.setFillStyle('yellow') -ctx.fillRect(100, 100, 150, 100) - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/23c43740-4f28-11eb-bdc1-8bd33eb6adaa.png) - -### CanvasContext.setLineCap -设置线条的端点样式。 - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|lineCap|String |'butt'、'round'、'square' |线条的结束端点样式 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.beginPath() -ctx.moveTo(10, 10) -ctx.lineTo(150, 10) -ctx.stroke() - -ctx.beginPath() -ctx.setLineCap('butt') -ctx.setLineWidth(10) -ctx.moveTo(10, 30) -ctx.lineTo(150, 30) -ctx.stroke() - -ctx.beginPath() -ctx.setLineCap('round') -ctx.setLineWidth(10) -ctx.moveTo(10, 50) -ctx.lineTo(150, 50) -ctx.stroke() - -ctx.beginPath() -ctx.setLineCap('square') -ctx.setLineWidth(10) -ctx.moveTo(10, 70) -ctx.lineTo(150, 70) -ctx.stroke() - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2577dab0-4f28-11eb-bdc1-8bd33eb6adaa.png) - -### CanvasContext.setLineDash -设置线条宽度。 - -**参数** - -|参数 |类型 |定义 | -|--- |--- |--- | -|pattern|Array |一组描述交替绘制线段和间距（坐标空间单位）长度的数字 | -|offset |Number |虚线偏移量 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -ctx.setLineDash([10, 20], 5); - -ctx.beginPath(); -ctx.moveTo(0,100); -ctx.lineTo(400, 100); -ctx.stroke(); - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2e1d4b50-4f28-11eb-8ff1-d5dcf8779628.png) - -### CanvasContext.setLineJoin -设置线条的交点样式。 - -**参数** - -|参数 |类型 |范围 |说明| -|--- |--- |--- |---| -|lineJoin |String |'bevel'、'round'、'miter' |线条的结束交点样式 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.beginPath() -ctx.moveTo(10, 10) -ctx.lineTo(100, 50) -ctx.lineTo(10, 90) -ctx.stroke() - -ctx.beginPath() -ctx.setLineJoin('bevel') -ctx.setLineWidth(10) -ctx.moveTo(50, 10) -ctx.lineTo(140, 50) -ctx.lineTo(50, 90) -ctx.stroke() - -ctx.beginPath() -ctx.setLineJoin('round') -ctx.setLineWidth(10) -ctx.moveTo(90, 10) -ctx.lineTo(180, 50) -ctx.lineTo(90, 90) -ctx.stroke() - -ctx.beginPath() -ctx.setLineJoin('miter') -ctx.setLineWidth(10) -ctx.moveTo(130, 10) -ctx.lineTo(220, 50) -ctx.lineTo(130, 90) -ctx.stroke() - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/264f9d10-4f28-11eb-bd01-97bc1429a9ff.png) - -### CanvasContext.setLineWidth -设置线条的宽度。 - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|lineWidth |Number |线条的宽度(单位是px) | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.beginPath() -ctx.moveTo(10, 10) -ctx.lineTo(150, 10) -ctx.stroke() - -ctx.beginPath() -ctx.setLineWidth(5) -ctx.moveTo(10, 30) -ctx.lineTo(150, 30) -ctx.stroke() - -ctx.beginPath() -ctx.setLineWidth(10) -ctx.moveTo(10, 50) -ctx.lineTo(150, 50) -ctx.stroke() - -ctx.beginPath() -ctx.setLineWidth(15) -ctx.moveTo(10, 70) -ctx.lineTo(150, 70) -ctx.stroke() - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/27d356e0-4f28-11eb-bd01-97bc1429a9ff.png) - -### CanvasContext.setMiterLimit -设置最大斜接长度，斜接长度指的是在两条线交汇处内角和外角之间的距离。 当 ``setLineJoin()`` 为 miter 时才有效。超过最大倾斜长度的，连接处将以 lineJoin 为 bevel 来显示。 - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|miterLimit |Number |最大斜接长度 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.beginPath() -ctx.setLineWidth(10) -ctx.setLineJoin('miter') -ctx.setMiterLimit(1) -ctx.moveTo(10, 10) -ctx.lineTo(100, 50) -ctx.lineTo(10, 90) -ctx.stroke() - -ctx.beginPath() -ctx.setLineWidth(10) -ctx.setLineJoin('miter') -ctx.setMiterLimit(2) -ctx.moveTo(50, 10) -ctx.lineTo(140, 50) -ctx.lineTo(50, 90) -ctx.stroke() - -ctx.beginPath() -ctx.setLineWidth(10) -ctx.setLineJoin('miter') -ctx.setMiterLimit(3) -ctx.moveTo(90, 10) -ctx.lineTo(180, 50) -ctx.lineTo(90, 90) -ctx.stroke() - -ctx.beginPath() -ctx.setLineWidth(10) -ctx.setLineJoin('miter') -ctx.setMiterLimit(4) -ctx.moveTo(130, 10) -ctx.lineTo(220, 50) -ctx.lineTo(130, 90) -ctx.stroke() - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/289176c0-4f28-11eb-bd01-97bc1429a9ff.png) - -### CanvasContext.setShadow -设置阴影样式。如果没有设置，offsetX 默认值为0， offsetY 默认值为0， blur 默认值为0，color 默认值为 black。 - -**参数** - -|参数|类型|定义 |说明 | -|---|---|--- |--- | -|offsetX|Number | |阴影相对于形状在水平方向的偏移 | -|offsetY|Number | |阴影相对于形状在竖直方向的偏移 | -|blur|Number |0~100 |阴影的模糊级别，数值越大越模糊 | -|color |Color | |阴影的颜色 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.setFillStyle('red') -ctx.setShadow(10, 50, 50, 'blue') -ctx.fillRect(10, 10, 150, 75) -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/308068a0-4f28-11eb-b997-9918a5dda011.png) - -### CanvasContext.setStrokeStyle -设置边框颜色。如果没有设置 fillStyle，默认颜色为 black。 - -**参数** - -|参数 |类型 |定义|说明 | -|--- |--- |---|--- | -|color|Color|Gradient Object|填充色 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.setStrokeStyle('red') -ctx.strokeRect(10, 10, 150, 75) -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/3302cdc0-4f28-11eb-97b7-0dc4655d6e68.png) - -### CanvasContext.setTextAlign -用于设置文字的对齐 - -|参数 |类型 |定义| -|--- |--- |---| -|align |String |可选值 'left'、'center'、'right' | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -ctx.setStrokeStyle('red') -ctx.moveTo(150, 20) -ctx.lineTo(150, 170) -ctx.stroke() - -ctx.setFontSize(15) -ctx.setTextAlign('left') -ctx.fillText('textAlign=left', 150, 60) - -ctx.setTextAlign('center') -ctx.fillText('textAlign=center', 150, 80) - -ctx.setTextAlign('right') -ctx.fillText('textAlign=right', 150, 100) - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2ee492f0-4f28-11eb-bdc1-8bd33eb6adaa.png) - -### CanvasContext.setTextBaseline -用于设置文字的水平对齐 - -**参数** - -|参数 |类型|说明| -|--- |---|---| -|textBaseline |String |可选值 'top'、'bottom'、'middle'、'normal' | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -ctx.setStrokeStyle('red') -ctx.moveTo(5, 75) -ctx.lineTo(295, 75) -ctx.stroke() - -ctx.setFontSize(20) - -ctx.setTextBaseline('top') -ctx.fillText('top', 5, 75) - -ctx.setTextBaseline('middle') -ctx.fillText('middle', 50, 75) - -ctx.setTextBaseline('bottom') -ctx.fillText('bottom', 120, 75) - -ctx.setTextBaseline('normal') -ctx.fillText('normal', 200, 75) - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2fba3270-4f28-11eb-bdc1-8bd33eb6adaa.png) - -### CanvasContext.setTransform -使用矩阵重新设置（覆盖）当前变换的方法 - -**语法** - -```javascript -canvasContext.setTransform(scaleX, skewX, skewY, scaleY, translateX, translateY) -``` - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|scaleX |Number |水平缩放 | -|skewX |Number |水平倾斜 | -|skewY |Number |垂直倾斜 | -|scaleY |Number |垂直缩放 | -|translateX |Number |水平移动 | -|translateY |Number |垂直移动 | - -### CanvasContext.stroke -画出当前路径的边框。默认颜色为黑色。 - -**Tip:** ``stroke()`` 描绘的的路径是从 ```beginPath()``` 开始计算，但是不会将 ```strokeRect()``` 包含进去，详情见例二。 - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.moveTo(10, 10) -ctx.lineTo(100, 10) -ctx.lineTo(100, 100) -ctx.stroke() -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/31473b10-4f28-11eb-bdc1-8bd33eb6adaa.png) - - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -// begin path -ctx.rect(10, 10, 100, 30) -ctx.setStrokeStyle('yellow') -ctx.stroke() - -// begin another path -ctx.beginPath() -ctx.rect(10, 40, 100, 30) - -// only stoke this rect, not in current path -ctx.setStrokeStyle('blue') -ctx.strokeRect(10, 70, 100, 30) - -ctx.rect(10, 100, 100, 30) - -// it will stroke current path -ctx.setStrokeStyle('red') -ctx.stroke() -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/322c1cd0-4f28-11eb-bdc1-8bd33eb6adaa.png) - -### CanvasContext.strokeRect -画一个矩形(非填充)。用 `setFillStroke()` 设置边框颜色，如果没设置默认是黑色。 - -**参数** - -|参数 |类型 |范围 |说明 | -|--- |--- |--- |--- | -|x |Number | |矩形路径左上角的x坐标 | -|y |Number | |矩形路径左上角的y坐标 | -|width |Number | |矩形路径的宽度 | -|height |Number | |矩形路径的高度 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.setStrokeStyle('red') -ctx.strokeRect(10, 10, 150, 75) -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/3302cdc0-4f28-11eb-97b7-0dc4655d6e68.png) - - -### CanvasContext.strokeText -给定的 (x, y) 位置绘制文本描边的方法 - -**语法** - -```javascript -canvasContext.strokeText(text, x, y, maxWidth) -``` - - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|text |String |要绘制的文本 | -|x |Number |文本起始点的 x 轴坐标 | -|y |Number |文本起始点的 y 轴坐标 | -|maxWidth |Number |需要绘制的最大宽度，可选 | - -### CanvasContext.transform -使用矩阵多次叠加当前变换的方法。 - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|scaleX |Number |水平缩放 | -|skewX |Number |水平倾斜 | -|skewY |Number |垂直倾斜 | -|scaleY |Number |垂直缩放 | -|translateX |Number |水平移动 | -|translateY |Number |垂直移动 | - -### CanvasContext.translate -对当前坐标系的原点(0, 0)进行变换，默认的坐标系原点为页面左上角。 - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|x |Number |水平坐标平移量 | -|y |Number |竖直坐标平移量 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -ctx.strokeRect(10, 10, 150, 100) -ctx.translate(20, 20) -ctx.strokeRect(10, 10, 150, 100) -ctx.translate(20, 20) -ctx.strokeRect(10, 10, 150, 100) - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/34aef720-4f28-11eb-97b7-0dc4655d6e68.png) +**属性** + +**平台差异说明** + +|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|QQ小程序|快手小程序|京东小程序| +|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| +|√|√|√|√|√|√|√|√|√| + +App-nvue下如需使用canvas，暂未封装为uni API，可参考[文档](https://github.com/dcloudio/NvueCanvasDemo)使用。 + +### CanvasContext.fillStyle string + +填充颜色。用法同 [CanvasContext.setFillStyle()](#canvascontextsetfillstyle)。 + +### CanvasContext.strokeStyle string + +边框颜色。用法同 [CanvasContext.setStrokeStyle()](#canvascontextsetstrokestyle)。 + +### CanvasContext.shadowOffsetX number + +阴影相对于形状在水平方向的偏移 + +### CanvasContext.shadowOffsetY number + +阴影相对于形状在竖直方向的偏移 + +### CanvasContext.shadowColor number + +阴影的颜色 + +### CanvasContext.shadowBlur number + +阴影的模糊级别 + +### CanvasContext.lineWidth number + +线条的宽度。用法同 [CanvasContext.setLineWidth()](#canvascontextsetlinewidth)。 + +### CanvasContext.lineCap number + +线条的端点样式。用法同 [CanvasContext.setLineCap()](#canvascontextsetlinecap)。 + +### CanvasContext.lineJoin number + +线条的交点样式。用法同 [CanvasContext.setLineJoin()](#canvascontextsetlinejoin)。 + +### CanvasContext.miterLimit number + +最大斜接长度。用法同 [CanvasContext.setMiterLimit()](#canvascontextsetmiterlimit)。 + +### CanvasContext.lineDashOffset number + +虚线偏移量，初始值为0 + +### CanvasContext.font string + +当前字体样式的属性。符合 [CSS font 语法](https://developer.mozilla.org/zh-CN/docs/Web/CSS/font) 的 DOMString 字符串，至少需要提供字体大小和字体族名。默认值为 10px sans-serif。 + +### CanvasContext.globalAlpha number + +全局画笔透明度。范围 0-1，0 表示完全透明，1 表示完全不透明。 + +### CanvasContext.globalCompositeOperation string + +在绘制新形状时应用的合成操作的类型。目前安卓版本只适用于 `fill` 填充块的合成，用于 `stroke` 线段的合成效果都是 `source-over`。 + +目前支持的操作有 +* App和H5端：source-over、destination-over、source-in、destination-in、source-out、destination-out、source-atop、destination-atop、lighter、darker、xor、copy +* 微信小程序安卓端：xor, source-over, source-atop, destination-out, lighter, overlay, darken, lighten, hard-light +* 微信小程序iOS端：xor, source-over, source-atop, destination-over, destination-out, lighter, multiply, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, saturation, luminosity + +**方法** + +**平台差异说明** + +|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|京东小程序| +|:-:|:-:|:-:|:-:|:-:|:-:|:-:| +|√|√|√|√|√|√|√| + +### CanvasContext.arc + +画一条弧线。创建一个圆可以用 ```arc()``` 方法指定起始弧度为0，终止弧度为 ```2 * Math.PI```。用 ```stroke()``` 或者 ```fill()``` 方法来在 ```canvas``` 中画弧线。 + +**参数** + +|参数|类型 |说明| +|---|--- |--- | +|x |Number |圆的x坐标 | +|y |Number |圆的y坐标| +|r|Number |圆的半径| +|sAngle |Number |起始弧度，单位弧度（在3点钟方向）| +|eAngle |Number |终止弧度| +|counterclockwise |Boolean|可选。指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针。| + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') + +// Draw coordinates +ctx.arc(100, 75, 50, 0, 2 * Math.PI) +ctx.setFillStyle('#EEEEEE') +ctx.fill() + +ctx.beginPath() +ctx.moveTo(40, 75) +ctx.lineTo(160, 75) +ctx.moveTo(100, 15) +ctx.lineTo(100, 135) +ctx.setStrokeStyle('#AAAAAA') +ctx.stroke() + +ctx.setFontSize(12) +ctx.setFillStyle('black') +ctx.fillText('0', 165, 78) +ctx.fillText('0.5*PI', 83, 145) +ctx.fillText('1*PI', 15, 78) +ctx.fillText('1.5*PI', 83, 10) + +// Draw points +ctx.beginPath() +ctx.arc(100, 75, 2, 0, 2 * Math.PI) +ctx.setFillStyle('lightgreen') +ctx.fill() + +ctx.beginPath() +ctx.arc(100, 25, 2, 0, 2 * Math.PI) +ctx.setFillStyle('blue') +ctx.fill() + +ctx.beginPath() +ctx.arc(150, 75, 2, 0, 2 * Math.PI) +ctx.setFillStyle('red') +ctx.fill() + +// Draw arc +ctx.beginPath() +ctx.arc(100, 75, 50, 0, 1.5 * Math.PI) +ctx.setStrokeStyle('#333333') +ctx.stroke() + +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/687c12e0-4f28-11eb-bdc1-8bd33eb6adaa.png) + +针对 ```arc(100, 75, 50, 0, 1.5 * Math.PI)```的三个关键坐标如下： +* 绿色: 圆心 (100, 75) +* 红色: 起始弧度 (0) +* 蓝色: 终止弧度 (1.5 * Math.PI) + +### CanvasContext.arcTo + +根据控制点和半径绘制圆弧路径。 + +```javascript +CanvasContext.arcTo(x1, y1, x2, y2, radius) +``` + +**参数** + +|属性值 |类型 |说明| +|--- |--- |--- | +|x1|Number |第一个控制点的 x 轴坐标| +|y1|Number |第一个控制点的 y 轴坐标| +|x2|Number |第二个控制点的 x 轴坐标| +|y2|Number |第二个控制点的 y 轴坐标| +|radius |Number |圆弧的半径 | + +### CanvasContext.beginPath + +开始创建一个路径，需要调用fill或者stroke才会使用路径进行填充或描边。 + +**Tip:** 在最开始的时候相当于调用了一次 ```beginPath()```。 +**Tip:** 同一个路径内的多次`setFillStyle()`、`setStrokeStyle()`、`setLineWidth()`等设置，以最后一次设置为准。 + + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') +// begin path +ctx.rect(10, 10, 100, 30) +ctx.setFillStyle('yellow') +ctx.fill() + +// begin another path +ctx.beginPath() +ctx.rect(10, 40, 100, 30) + +// only fill this rect, not in current path +ctx.setFillStyle('blue') +ctx.fillRect(10, 70, 100, 30) + +ctx.rect(10, 100, 100, 30) + +// it will fill current path +ctx.setFillStyle('red') +ctx.fill() +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1b5714b0-4f28-11eb-8a36-ebb87efcf8c0.png) +### CanvasContext.bezierCurveTo + +创建三次方贝塞尔曲线路径。 + +**Tip:** 曲线的起始点为路径中前一个点。 + +**参数** + +|参数 |类型 |说明| +|--- |--- |---| +|cp1x |Number |第一个贝塞尔控制点的 x 坐标| +|cp1y |Number |第一个贝塞尔控制点的 y 坐标| +|cp2x |Number |第二个贝塞尔控制点的 x 坐标| +|cp2y |Number |第二个贝塞尔控制点的 y 坐标| +|x|Number |结束点的 x 坐标| +|y|Number |结束点的 y 坐标| + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') + +// Draw points +ctx.beginPath() +ctx.arc(20, 20, 2, 0, 2 * Math.PI) +ctx.setFillStyle('red') +ctx.fill() + +ctx.beginPath() +ctx.arc(200, 20, 2, 0, 2 * Math.PI) +ctx.setFillStyle('lightgreen') +ctx.fill() + +ctx.beginPath() +ctx.arc(20, 100, 2, 0, 2 * Math.PI) +ctx.arc(200, 100, 2, 0, 2 * Math.PI) +ctx.setFillStyle('blue') +ctx.fill() + +ctx.setFillStyle('black') +ctx.setFontSize(12) + +// Draw guides +ctx.beginPath() +ctx.moveTo(20, 20) +ctx.lineTo(20, 100) +ctx.lineTo(150, 75) + +ctx.moveTo(200, 20) +ctx.lineTo(200, 100) +ctx.lineTo(70, 75) +ctx.setStrokeStyle('#AAAAAA') +ctx.stroke() + +// Draw quadratic curve +ctx.beginPath() +ctx.moveTo(20, 20) +ctx.bezierCurveTo(20, 100, 200, 100, 200, 20) +ctx.setStrokeStyle('black') +ctx.stroke() + +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/03cf3750-4f28-11eb-b997-9918a5dda011.png) + +针对 `moveTo(20, 20)` ```bezierCurveTo(20, 100, 200, 100, 200, 20)``` 的三个关键坐标如下： + +* 红色：起始点(20, 20) +* 蓝色：两个控制点(20, 100) (200, 100) +* 绿色：终止点(200, 20) + +### CanvasContext.clearRect + +清除画布上在该矩形区域内的内容。 + + +**参数** + +|参数|类型|说明| +|--- |--- |--- | +|x |Number |矩形区域左上角的x坐标| +|y |Number |矩形区域左上角的y坐标| +|width |Number |矩形区域的宽度| +|height |Number |矩形区域的高度| + +**示例代码** + +clearRect 并非画一个白色的矩形在地址区域，而是清空，为了有直观感受，对 canvas 加了一层背景色。 + +```javascript + +``` + +```javascript +const ctx = uni.createCanvasContext('myCanvas') +ctx.setFillStyle('red') +ctx.fillRect(0, 0, 150, 200) +ctx.setFillStyle('blue') +ctx.fillRect(150, 0, 150, 200) +ctx.clearRect(10, 10, 150, 75) +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/05afde30-4f28-11eb-a16f-5b3e54966275.png) + + +### CanvasContext.clip +从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。 + +**Tip:** 用 setFillStroke() 设置矩形线条的颜色，如果没设置默认是黑色。 + + +**示例代码** + +```javascript +const context = uni.createCanvasContext('myCanvas') + +uni.downloadFile({ + url: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png', + success: function (res) { +context.save() +context.beginPath() +context.arc(96, 96, 48, 0, 2 * Math.PI) +context.clip() +context.drawImage(res.tempFilePath, 48, 48) + context.restore() + context.draw() + } +}) + +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/067a3310-4f28-11eb-b997-9918a5dda011.png) + +### CanvasContext.closePath +关闭一个路径。 + +**Tip:** 关闭路径会连接起点和终点。 +**Tip:** 如果关闭路径后没有调用 ```fill()``` 或者 ```stroke()``` 并开启了新的路径，那之前的路径将不会被渲染。 + + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') +ctx.moveTo(10, 10) +ctx.lineTo(100, 10) +ctx.lineTo(100, 100) +ctx.closePath() +ctx.stroke() +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/074e9a10-4f28-11eb-8a36-ebb87efcf8c0.png) + + +```javascript +const ctx = uni.createCanvasContext('myCanvas') +// begin path +ctx.rect(10, 10, 100, 30) +ctx.closePath() + +// begin another path +ctx.beginPath() +ctx.rect(10, 40, 100, 30) + +// only fill this rect, not in current path +ctx.setFillStyle('blue') +ctx.fillRect(10, 70, 100, 30) + +ctx.rect(10, 100, 100, 30) + +// it will fill current path +ctx.setFillStyle('red') +ctx.fill() +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/02d34b20-4f28-11eb-b680-7980c8a877b8.png) + +### CanvasContext.createCircularGradient +创建一个从圆心开始的渐变。返回的 [CanvasGradient](/api/canvas/CanvasGradient) 对象，需要使用 ```CanvasGradient.addColorStop()``` 来指定渐变点，至少要两个。 + +**参数** + +|参数 |类型 |定义 | +|--- |--- |--- | +|x |Number |圆心的x坐标| +|y |Number |圆心的y坐标| +|r |Number |圆的半径 | + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') + +// Create circular gradient +const grd = ctx.createCircularGradient(75, 50, 50) +grd.addColorStop(0, 'red') +grd.addColorStop(1, 'white') + +// Fill with gradient +ctx.setFillStyle(grd) +ctx.fillRect(10, 10, 150, 80) +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/04c3f790-4f28-11eb-8a36-ebb87efcf8c0.png) + +### CanvasContext.createLinearGradient +创建一个线性的渐变颜色。返回的 [CanvasGradient](/api/canvas/CanvasGradient) 对象，需要使用 ```CanvasGradient.addColorStop()``` 来指定渐变点，至少要两个。 + +**参数** + +|参数 |类型 |定义 | +|--- |--- |--- | +|x0 |Number |起点的x坐标| +|y0 |Number |起点的y坐标| +|x1 |Number |终点的x坐标| +|y1 |Number |终点的y坐标| + + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') + +// Create linear gradient +const grd = ctx.createLinearGradient(0, 0, 200, 0) +grd.addColorStop(0, 'red') +grd.addColorStop(1, 'white') + +// Fill with gradient +ctx.setFillStyle(grd) +ctx.fillRect(10, 10, 150, 80) +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/24a94010-4f28-11eb-bdc1-8bd33eb6adaa.png) + +### CanvasContext.createPattern +对指定的图像创建模式的方法，可在指定的方向上重复元图像 + +**参数** + +|参数 |类型 |说明 | +|--- |--- |--- | +|image |String |重复的图像源，仅支持包内路径和临时路径 | +|repetition |String |指定如何重复图像，有效值有: repeat, repeat-x, repeat-y, no-repeat | + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') +const pattern = ctx.createPattern('/path/to/image', 'repeat-x') +ctx.fillStyle = pattern +ctx.fillRect(0, 0, 300, 150) +ctx.draw() +``` + +### CanvasContext.draw +将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。 + +**参数** + +|参数|类型|说明|最低版本 | +|---|---|---|---| +|reserve |Boolean |非必填。本次绘制是否接着上一次绘制，即reserve参数为false，则在本次调用drawCanvas绘制之前native层应先清空画布再继续绘制；若reserver参数为true，则保留当前画布上的内容，本次调用drawCanvas绘制的内容覆盖在上面，默认 false | | +|callback |Function |绘制完成后回调|1.7.0| + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') + +ctx.setFillStyle('red') +ctx.fillRect(10, 10, 150, 100) +ctx.draw() +ctx.fillRect(50, 50, 150, 100) +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/33d7d100-4f28-11eb-97b7-0dc4655d6e68.png) + + +```javascript +const ctx = uni.createCanvasContext('myCanvas') + +ctx.setFillStyle('red') +ctx.fillRect(10, 10, 150, 100) +ctx.draw() +ctx.fillRect(50, 50, 150, 100) +ctx.draw(true) +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2ad88090-4f28-11eb-8ff1-d5dcf8779628.png) + +### CanvasContext.drawImage +绘制图像到画布。 + +**参数** + +|参数|类型 |说明 | +|--- |---|--- | +|imageResource |String |所要绘制的图片资源 | +|dx |Number |图像的左上角在目标canvas上 X 轴的位置 | +|dy |Number |图像的左上角在目标canvas上 Y 轴的位置 | +|dWidth|Number |在目标画布上绘制图像的宽度，允许对绘制的图像进行缩放 | +|dHeight|Number |在目标画布上绘制图像的高度，允许对绘制的图像进行缩放 | +|sx |Number |源图像的矩形选择框的左上角 X 坐标 | +|sy |Number |源图像的矩形选择框的左上角 Y 坐标 | +|sWidth|Number |源图像的矩形选择框的宽度 | +|sHeight |Number |源图像的矩形选择框的高度 | + +有三个版本的写法： + +* ```drawImage(dx, dy)``` +* ```drawImage(dx, dy, dWidth, dHeight)``` +* ```drawImage(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)``` + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') + +uni.chooseImage({ + success: function(res){ + ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100) + ctx.draw() + } +}) +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1946d250-4f28-11eb-8a36-ebb87efcf8c0.png) + +### CanvasContext.fill +对当前路径中的内容进行填充。默认的填充色为黑色。 + +**Tip:** 如果当前路径没有闭合，```fill()``` 方法会将起点和终点进行连接，然后填充，详情见例一。 + +**Tip:** ```fill()``` 填充的的路径是从 ```beginPath()``` 开始计算，但是不会将 ```fillRect()``` 包含进去，详情见例二。 + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') +ctx.moveTo(10, 10) +ctx.lineTo(100, 10) +ctx.lineTo(100, 100) +ctx.fill() +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1a366270-4f28-11eb-a16f-5b3e54966275.png) + +```javascript +const ctx = uni.createCanvasContext('myCanvas') +// begin path +ctx.rect(10, 10, 100, 30) +ctx.setFillStyle('yellow') +ctx.fill() + +// begin another path +ctx.beginPath() +ctx.rect(10, 40, 100, 30) + +// only fill this rect, not in current path +ctx.setFillStyle('blue') +ctx.fillRect(10, 70, 100, 30) + +ctx.rect(10, 100, 100, 30) + +// it will fill current path +ctx.setFillStyle('red') +ctx.fill() +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1b5714b0-4f28-11eb-8a36-ebb87efcf8c0.png) + +### CanvasContext.fillRect +填充一个矩形。 + +**Tip:** 用 ```setFillStyle()``` 设置矩形的填充色，如果没设置默认是黑色。 + +**参数** + +|参数 |类型 |定义 | +|--- |--- |--- | +|x |Number |矩形路径左上角的x坐标 | +|y |Number |矩形路径左上角的y坐标 | +|width |Number |矩形路径的宽度 | +|height |Number |矩形路径的高度 | + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') +ctx.setFillStyle('red') +ctx.fillRect(10, 10, 150, 75) +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1c4656b0-4f28-11eb-a16f-5b3e54966275.png) + +### CanvasContext.fillText +在画布上绘制被填充的文本。 + +**参数** + +|参数 |类型 |说明 | +|--- |--- |--- | +|text |String |在画布上输出的文本 | +|x |Number |绘制文本的左上角x坐标位置 | +|y |Number |绘制文本的左上角y坐标位置 | +|maxWidth |Number |需要绘制的最大宽度，可选 | + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') + +ctx.setFontSize(20) +ctx.fillText('Hello', 20, 20) +ctx.fillText('MINA', 100, 100) + +ctx.draw() +``` + + +### CanvasContext.lineTo +增加一个新点，然后创建一条从上次指定点到目标点的线。 + +**Tip:** 用 ```stroke()``` 方法来画线条 + +**参数** + +|参数 |类型|说明 | +|--- |--- |--- | +|x |Number |目标位置的x坐标| +|y |Number |目标位置的y坐标| + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') +ctx.moveTo(10, 10) +ctx.rect(10, 10, 100, 50) +ctx.lineTo(110, 60) +ctx.stroke() +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/27097730-4f28-11eb-bdc1-8bd33eb6adaa.png) + +### CanvasContext.measureText +测量文本尺寸信息，目前仅返回文本宽度。同步接口。（App 端 2.8.12+ 支持） + +**参数** + +|参数 |类型 |说明 | +|--- |--- |--- | +|text |String |要测量的文本 | + +**返回** + +返回 ```TextMetrics``` 对象，结构如下： + +|参数 |类型 |说明 | +|--- |--- |--- | +|width |Number |文本的宽度 | + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') +ctx.font = 'italic bold 20px cursive' +const metrics = ctx.measureText('Hello World') +console.log(metrics.width) +``` + +### CanvasContext.moveTo +把路径移动到画布中的指定点，不创建线条。用 ```stroke()``` 方法来画线条。 + +**参数** + +|参数 |类型|说明 | +|--- |--- |--- | +|x |Number |目标位置的x坐标| +|y |Number |目标位置的y坐标| + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') +ctx.moveTo(10, 10) +ctx.lineTo(100, 10) + +ctx.moveTo(10, 50) +ctx.lineTo(100, 50) +ctx.stroke() +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2945d2a0-4f28-11eb-bdc1-8bd33eb6adaa.png) + +### CanvasContext.quadraticCurveTo +创建二次贝塞尔曲线路径。曲线的起始点为路径中前一个点。 + +**参数** + +|参数 |类型 |说明 | +|--- |--- |--- | +|cpx |Number |贝塞尔控制点的x坐标| +|cpy |Number |贝塞尔控制点的y坐标| +|x |Number |结束点的x坐标 | +|y |Number |结束点的y坐标 | + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') + +// Draw points +ctx.beginPath() +ctx.arc(20, 20, 2, 0, 2 * Math.PI) +ctx.setFillStyle('red') +ctx.fill() + +ctx.beginPath() +ctx.arc(200, 20, 2, 0, 2 * Math.PI) +ctx.setFillStyle('lightgreen') +ctx.fill() + +ctx.beginPath() +ctx.arc(20, 100, 2, 0, 2 * Math.PI) +ctx.setFillStyle('blue') +ctx.fill() + +ctx.setFillStyle('black') +ctx.setFontSize(12) + +// Draw guides +ctx.beginPath() +ctx.moveTo(20, 20) +ctx.lineTo(20, 100) +ctx.lineTo(200, 20) +ctx.setStrokeStyle('#AAAAAA') +ctx.stroke() + +// Draw quadratic curve +ctx.beginPath() +ctx.moveTo(20, 20) +ctx.quadraticCurveTo(20, 100, 200, 20) +ctx.setStrokeStyle('black') +ctx.stroke() + +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2a0a0d00-4f28-11eb-bd01-97bc1429a9ff.png) + +针对 `moveTo(20, 20)` ```quadraticCurveTo(20, 100, 200, 20)``` 的三个关键坐标如下： + +* 红色：起始点(20, 20) +* 蓝色：控制点(20, 100) +* 绿色：终止点(200, 20) + +### CanvasContext.rect +创建一个矩形。 + +**Tip:** 用 fill() 或者 stroke() 方法将矩形真正的画到 canvas 中。 + +**参数** + +|参数 |类型 |说明 | +|--- |--- |--- | +|x |Number |矩形路径左上角的x坐标 | +|y |Number |矩形路径左上角的y坐标 | +|width |Number |矩形路径的宽度 | +|height |Number |矩形路径的高度 | + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') +ctx.rect(10, 10, 150, 75) +ctx.setFillStyle('red') +ctx.fill() +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1c4656b0-4f28-11eb-a16f-5b3e54966275.png) + +### CanvasContext.restore +恢复之前保存的绘图上下文。 + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') + +// save the default fill style +ctx.save() +ctx.setFillStyle('red') +ctx.fillRect(10, 10, 150, 100) + +// restore to the previous saved state +ctx.restore() +ctx.fillRect(50, 50, 150, 100) + +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2c8d0e60-4f28-11eb-8ff1-d5dcf8779628.png) + +### CanvasContext.rotate +以原点为中心，原点可以用 translate方法修改。顺时针旋转当前坐标轴。多次调用rotate，旋转的角度会叠加。 + +**参数** + +|参数 |类型 |说明 | +|--- |--- |--- | +|rotate |Number |旋转角度，以弧度计(degrees * Math.PI/180；degrees范围为0~360) | + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') + +ctx.strokeRect(100, 10, 150, 100) +ctx.rotate(20 * Math.PI / 180) +ctx.strokeRect(100, 10, 150, 100) +ctx.rotate(20 * Math.PI / 180) +ctx.strokeRect(100, 10, 150, 100) + +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2bbd8960-4f28-11eb-bd01-97bc1429a9ff.png) + +### CanvasContext.save +保存当前的绘图上下文。 + +**示例代码** + +```javascript +const ctx = wx.createCanvasContext('myCanvas') + +// save the default fill style +ctx.save() +ctx.setFillStyle('red') +ctx.fillRect(10, 10, 150, 100) + +// restore to the previous saved state +ctx.restore() +ctx.fillRect(50, 50, 150, 100) + +ctx.draw() +``` + +### CanvasContext.scale +在调用```scale```方法后，之后创建的路径其横纵坐标会被缩放。多次调用```scale```，倍数会相乘。 + +**参数** + +|参数 |类型 |说明 | +|--- |--- |--- | +|scaleWidth |Number |横坐标缩放的倍数 (1 = 100%，0.5 = 50%，2 = 200%) | +|scaleHeight|Number |纵坐标轴缩放的倍数 (1 = 100%，0.5 = 50%，2 = 200%) | + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') + +ctx.strokeRect(10, 10, 25, 15) +ctx.scale(2, 2) +ctx.strokeRect(10, 10, 25, 15) +ctx.scale(2, 2) +ctx.strokeRect(10, 10, 25, 15) + +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2d528140-4f28-11eb-8ff1-d5dcf8779628.png) + +### CanvasContext.setFillStyle@canvascontextsetfillstyle +设置填充色，如果没有设置 fillStyle，默认颜色为 black。 + +**语法** + +```javascript +canvasContext.setFillStyle(color) +canvasContext.fillStyle = color +``` + +**参数** + +|参数 |类型|定义 |说明| +|---|---|---|---| +|color|Color|Gradient Object|填充色 | + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') +ctx.setFillStyle('red') +ctx.fillRect(10, 10, 150, 75) +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1c4656b0-4f28-11eb-a16f-5b3e54966275.png) + +### CanvasContext.setFontSize +设置字体的字号。 + +|参数 |类型 |说明 | +|--- |--- |--- | +|fontSize |Number |字体的字号| + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') + +ctx.setFontSize(20) +ctx.fillText('20', 20, 20) +ctx.setFontSize(30) +ctx.fillText('30', 40, 40) +ctx.setFontSize(40) +ctx.fillText('40', 60, 60) +ctx.setFontSize(50) +ctx.fillText('50', 90, 90) + +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1855bb90-4f28-11eb-a16f-5b3e54966275.png) + + +### CanvasContext.setGlobalAlpha +设置全局画笔透明度。 + +**参数** + +|参数 |类型 |范围|说明 | +|--- |--- |--- |--- | +|alpha |Number |0~1 |透明度，0 表示完全透明，1 表示完全不透明 | + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') + +ctx.setFillStyle('red') +ctx.fillRect(10, 10, 150, 100) +ctx.setGlobalAlpha(0.2) +ctx.setFillStyle('blue') +ctx.fillRect(50, 50, 150, 100) +ctx.setFillStyle('yellow') +ctx.fillRect(100, 100, 150, 100) + +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/23c43740-4f28-11eb-bdc1-8bd33eb6adaa.png) + +### CanvasContext.setLineCap@canvascontextsetlinecap +设置线条的端点样式。 + +**参数** + +|参数 |类型 |说明 | +|--- |--- |--- | +|lineCap|String |'butt'、'round'、'square' |线条的结束端点样式 | + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') +ctx.beginPath() +ctx.moveTo(10, 10) +ctx.lineTo(150, 10) +ctx.stroke() + +ctx.beginPath() +ctx.setLineCap('butt') +ctx.setLineWidth(10) +ctx.moveTo(10, 30) +ctx.lineTo(150, 30) +ctx.stroke() + +ctx.beginPath() +ctx.setLineCap('round') +ctx.setLineWidth(10) +ctx.moveTo(10, 50) +ctx.lineTo(150, 50) +ctx.stroke() + +ctx.beginPath() +ctx.setLineCap('square') +ctx.setLineWidth(10) +ctx.moveTo(10, 70) +ctx.lineTo(150, 70) +ctx.stroke() + +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2577dab0-4f28-11eb-bdc1-8bd33eb6adaa.png) + +### CanvasContext.setLineDash +设置线条宽度。 + +**参数** + +|参数 |类型 |定义 | +|--- |--- |--- | +|pattern|Array |一组描述交替绘制线段和间距（坐标空间单位）长度的数字 | +|offset |Number |虚线偏移量 | + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') + +ctx.setLineDash([10, 20], 5); + +ctx.beginPath(); +ctx.moveTo(0,100); +ctx.lineTo(400, 100); +ctx.stroke(); + +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2e1d4b50-4f28-11eb-8ff1-d5dcf8779628.png) + +### CanvasContext.setLineJoin@canvascontextsetlinejoin +设置线条的交点样式。 + +**参数** + +|参数 |类型 |范围 |说明| +|--- |--- |--- |---| +|lineJoin |String |'bevel'、'round'、'miter' |线条的结束交点样式 | + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') +ctx.beginPath() +ctx.moveTo(10, 10) +ctx.lineTo(100, 50) +ctx.lineTo(10, 90) +ctx.stroke() + +ctx.beginPath() +ctx.setLineJoin('bevel') +ctx.setLineWidth(10) +ctx.moveTo(50, 10) +ctx.lineTo(140, 50) +ctx.lineTo(50, 90) +ctx.stroke() + +ctx.beginPath() +ctx.setLineJoin('round') +ctx.setLineWidth(10) +ctx.moveTo(90, 10) +ctx.lineTo(180, 50) +ctx.lineTo(90, 90) +ctx.stroke() + +ctx.beginPath() +ctx.setLineJoin('miter') +ctx.setLineWidth(10) +ctx.moveTo(130, 10) +ctx.lineTo(220, 50) +ctx.lineTo(130, 90) +ctx.stroke() + +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/264f9d10-4f28-11eb-bd01-97bc1429a9ff.png) + +### CanvasContext.setLineWidth@canvascontextsetlinewidth +设置线条的宽度。 + +**参数** + +|参数 |类型 |说明 | +|--- |--- |--- | +|lineWidth |Number |线条的宽度(单位是px) | + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') +ctx.beginPath() +ctx.moveTo(10, 10) +ctx.lineTo(150, 10) +ctx.stroke() + +ctx.beginPath() +ctx.setLineWidth(5) +ctx.moveTo(10, 30) +ctx.lineTo(150, 30) +ctx.stroke() + +ctx.beginPath() +ctx.setLineWidth(10) +ctx.moveTo(10, 50) +ctx.lineTo(150, 50) +ctx.stroke() + +ctx.beginPath() +ctx.setLineWidth(15) +ctx.moveTo(10, 70) +ctx.lineTo(150, 70) +ctx.stroke() + +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/27d356e0-4f28-11eb-bd01-97bc1429a9ff.png) + +### CanvasContext.setMiterLimit@canvascontextsetmiterlimit +设置最大斜接长度，斜接长度指的是在两条线交汇处内角和外角之间的距离。 当 ``setLineJoin()`` 为 miter 时才有效。超过最大倾斜长度的，连接处将以 lineJoin 为 bevel 来显示。 + +**参数** + +|参数 |类型 |说明 | +|--- |--- |--- | +|miterLimit |Number |最大斜接长度 | + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') +ctx.beginPath() +ctx.setLineWidth(10) +ctx.setLineJoin('miter') +ctx.setMiterLimit(1) +ctx.moveTo(10, 10) +ctx.lineTo(100, 50) +ctx.lineTo(10, 90) +ctx.stroke() + +ctx.beginPath() +ctx.setLineWidth(10) +ctx.setLineJoin('miter') +ctx.setMiterLimit(2) +ctx.moveTo(50, 10) +ctx.lineTo(140, 50) +ctx.lineTo(50, 90) +ctx.stroke() + +ctx.beginPath() +ctx.setLineWidth(10) +ctx.setLineJoin('miter') +ctx.setMiterLimit(3) +ctx.moveTo(90, 10) +ctx.lineTo(180, 50) +ctx.lineTo(90, 90) +ctx.stroke() + +ctx.beginPath() +ctx.setLineWidth(10) +ctx.setLineJoin('miter') +ctx.setMiterLimit(4) +ctx.moveTo(130, 10) +ctx.lineTo(220, 50) +ctx.lineTo(130, 90) +ctx.stroke() + +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/289176c0-4f28-11eb-bd01-97bc1429a9ff.png) + +### CanvasContext.setShadow +设置阴影样式。如果没有设置，offsetX 默认值为0， offsetY 默认值为0， blur 默认值为0，color 默认值为 black。 + +**参数** + +|参数|类型|定义 |说明 | +|---|---|--- |--- | +|offsetX|Number | |阴影相对于形状在水平方向的偏移 | +|offsetY|Number | |阴影相对于形状在竖直方向的偏移 | +|blur|Number |0~100 |阴影的模糊级别，数值越大越模糊 | +|color |Color | |阴影的颜色 | + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') +ctx.setFillStyle('red') +ctx.setShadow(10, 50, 50, 'blue') +ctx.fillRect(10, 10, 150, 75) +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/308068a0-4f28-11eb-b997-9918a5dda011.png) + +### CanvasContext.setStrokeStyle@canvascontextsetstrokestyle +设置边框颜色。如果没有设置 fillStyle，默认颜色为 black。 + +**参数** + +|参数 |类型 |定义|说明 | +|--- |--- |---|--- | +|color|Color|Gradient Object|填充色 | + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') +ctx.setStrokeStyle('red') +ctx.strokeRect(10, 10, 150, 75) +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/3302cdc0-4f28-11eb-97b7-0dc4655d6e68.png) + +### CanvasContext.setTextAlign +用于设置文字的对齐 + +|参数 |类型 |定义| +|--- |--- |---| +|align |String |可选值 'left'、'center'、'right' | + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') + +ctx.setStrokeStyle('red') +ctx.moveTo(150, 20) +ctx.lineTo(150, 170) +ctx.stroke() + +ctx.setFontSize(15) +ctx.setTextAlign('left') +ctx.fillText('textAlign=left', 150, 60) + +ctx.setTextAlign('center') +ctx.fillText('textAlign=center', 150, 80) + +ctx.setTextAlign('right') +ctx.fillText('textAlign=right', 150, 100) + +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2ee492f0-4f28-11eb-bdc1-8bd33eb6adaa.png) + +### CanvasContext.setTextBaseline +用于设置文字的水平对齐 + +**参数** + +|参数 |类型|说明| +|--- |---|---| +|textBaseline |String |可选值 'top'、'bottom'、'middle'、'normal' | + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') + +ctx.setStrokeStyle('red') +ctx.moveTo(5, 75) +ctx.lineTo(295, 75) +ctx.stroke() + +ctx.setFontSize(20) + +ctx.setTextBaseline('top') +ctx.fillText('top', 5, 75) + +ctx.setTextBaseline('middle') +ctx.fillText('middle', 50, 75) + +ctx.setTextBaseline('bottom') +ctx.fillText('bottom', 120, 75) + +ctx.setTextBaseline('normal') +ctx.fillText('normal', 200, 75) + +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2fba3270-4f28-11eb-bdc1-8bd33eb6adaa.png) + +### CanvasContext.setTransform +使用矩阵重新设置（覆盖）当前变换的方法 + +**语法** + +```javascript +canvasContext.setTransform(scaleX, skewX, skewY, scaleY, translateX, translateY) +``` + +**参数** + +|参数 |类型 |说明 | +|--- |--- |--- | +|scaleX |Number |水平缩放 | +|skewX |Number |水平倾斜 | +|skewY |Number |垂直倾斜 | +|scaleY |Number |垂直缩放 | +|translateX |Number |水平移动 | +|translateY |Number |垂直移动 | + +### CanvasContext.stroke +画出当前路径的边框。默认颜色为黑色。 + +**Tip:** ``stroke()`` 描绘的的路径是从 ```beginPath()``` 开始计算，但是不会将 ```strokeRect()``` 包含进去，详情见例二。 + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') +ctx.moveTo(10, 10) +ctx.lineTo(100, 10) +ctx.lineTo(100, 100) +ctx.stroke() +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/31473b10-4f28-11eb-bdc1-8bd33eb6adaa.png) + + +```javascript +const ctx = uni.createCanvasContext('myCanvas') +// begin path +ctx.rect(10, 10, 100, 30) +ctx.setStrokeStyle('yellow') +ctx.stroke() + +// begin another path +ctx.beginPath() +ctx.rect(10, 40, 100, 30) + +// only stoke this rect, not in current path +ctx.setStrokeStyle('blue') +ctx.strokeRect(10, 70, 100, 30) + +ctx.rect(10, 100, 100, 30) + +// it will stroke current path +ctx.setStrokeStyle('red') +ctx.stroke() +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/322c1cd0-4f28-11eb-bdc1-8bd33eb6adaa.png) + +### CanvasContext.strokeRect +画一个矩形(非填充)。用 `setFillStroke()` 设置边框颜色，如果没设置默认是黑色。 + +**参数** + +|参数 |类型 |范围 |说明 | +|--- |--- |--- |--- | +|x |Number | |矩形路径左上角的x坐标 | +|y |Number | |矩形路径左上角的y坐标 | +|width |Number | |矩形路径的宽度 | +|height |Number | |矩形路径的高度 | + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') +ctx.setStrokeStyle('red') +ctx.strokeRect(10, 10, 150, 75) +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/3302cdc0-4f28-11eb-97b7-0dc4655d6e68.png) + + +### CanvasContext.strokeText +给定的 (x, y) 位置绘制文本描边的方法 + +**语法** + +```javascript +canvasContext.strokeText(text, x, y, maxWidth) +``` + + +**参数** + +|参数 |类型 |说明 | +|--- |--- |--- | +|text |String |要绘制的文本 | +|x |Number |文本起始点的 x 轴坐标 | +|y |Number |文本起始点的 y 轴坐标 | +|maxWidth |Number |需要绘制的最大宽度，可选 | + +### CanvasContext.transform +使用矩阵多次叠加当前变换的方法。 + +**参数** + +|参数 |类型 |说明 | +|--- |--- |--- | +|scaleX |Number |水平缩放 | +|skewX |Number |水平倾斜 | +|skewY |Number |垂直倾斜 | +|scaleY |Number |垂直缩放 | +|translateX |Number |水平移动 | +|translateY |Number |垂直移动 | + +### CanvasContext.translate +对当前坐标系的原点(0, 0)进行变换，默认的坐标系原点为页面左上角。 + +**参数** + +|参数 |类型 |说明 | +|--- |--- |--- | +|x |Number |水平坐标平移量 | +|y |Number |竖直坐标平移量 | + +**示例代码** + +```javascript +const ctx = uni.createCanvasContext('myCanvas') + +ctx.strokeRect(10, 10, 150, 100) +ctx.translate(20, 20) +ctx.strokeRect(10, 10, 150, 100) +ctx.translate(20, 20) +ctx.strokeRect(10, 10, 150, 100) + +ctx.draw() +``` + +![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/34aef720-4f28-11eb-97b7-0dc4655d6e68.png) -- GitLab