微信小程序开发—(八)canvas绘制图形

r囧r小猫 2021-09-12 06:22 1198阅读 0赞

[一.小知识][.]

(1).API接口

![20170504092219697][]

(2).context 对象的方法列表

![20170504092234731][]

![20170504092347839][]

![20170504092404686][]

![20170504092419073][]

![20170504092458777][]

二.步骤

wxml中：

在js文件onLoad: function() \{\}的方法中开始编写代码

1.创建一个 Canvas 绘图上下文 CanvasContext

const ctx = wx.createCanvasContext('myCanvas')

2.们来描述要在 Canvas 中绘制什么内容(绘图描述)

①.样式的描述

ctx.setFillStyle('red')

②形状描述：填充矩形，描边矩形，圆，线段等

ctx.fillRect(10, 10, 150, 75)

3.绘制

ctx.draw()

三.效果

wxml中：      <canvas canvas-id="myCanvas" class="myCanvas" ></canvas>

(1).绘制矩形：参数都是(起点x1,起点y1,宽度，长度)

①填充矩形

填充颜色：setFillStyle('red')

填充矩形:ctx.fillRect(10, 10, 150, 75)或是ctx.rect(10, 10, 150, 75)
     
      
     
      
      
       如果没有填充颜色，则默认是黑色

js文件中

const ctx = wx.createCanvasContext('myCanvas') ctx.setFillStyle('red') ctx.fillRect(10, 10, 150, 75) ctx.draw()

![Image 1][]

### ![20170504103858629][]    ###

### ②描边矩形 ###

### 描边颜色:ctx.setStrokeStyle('red') ###

描边矩形：setFillStroke()

const ctx = wx.createCanvasContext('myCanvas') ctx.setStrokeStyle('red') ctx.strokeRect(10, 10, 150, 75) ctx.draw()

![20170504103912595][]  
![Image 1][]

③清除画布上的矩形内容：ctx.clearRect(10, 10, 150, 75)

注意： clearRect 并非画一个白色的矩形在地址区域，而是清空，为了有直观感受，对 canvas 加了一层背景色。

加了一层背景色![吐舌头][tongue.gif]加了一层背景色![吐舌头][tongue.gif]

wxml中：

js中：

onLoad: function() { const ctx = wx.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(); }

![20170504094904064][]

(2).路径

ctx.moveTo(10, 10)：把路径移动到画布中的指定点

ctx.lineTo(110, 60)：增加一个新点，然后创建一条从上次指定点到目标点的线

ctx.fill()：填充

1.填充

对当前路径中的内容进行填充。默认的填充色为黑色。  
Tip: 如果当前路径没有闭合，fill() 方法会将起点和终点进行连接，然后填充。

const ctx = wx.createCanvasContext('myCanvas') ctx.moveTo(10, 10) ctx.lineTo(100, 10) ctx.lineTo(100, 100) ctx.fill() ctx.draw()

![Image 1][]   
![20170504103941881][]

Tip: fill() 填充的的路径是从 beginPath() 开始计算，但是不会将 fillRect() 包含进去。

const ctx = wx.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()

![Image 1][] ![20170504103953345][]

2.描边

画出当前路径的边框。默认颜色色为黑色。

const ctx = wx.createCanvasContext('myCanvas') ctx.moveTo(10, 10) ctx.lineTo(100, 10) ctx.lineTo(100, 100) ctx.stroke() ctx.draw()

![Image 1][] ![20170504104008709][]  
  
Tip: stroke() 描绘的的路径是从 beginPath() 开始计算，但是不会将 strokeRect() 包含进去.

const ctx = wx.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()

![Image 1][]

![20170504104026257][]  
注意：

创建路径：ctx.beginPath()和ctx.closePath()

①.开始创建路径：ctx.beginPath()

开始创建一个路径，需要调用fill或者stroke才会使用路径进行填充或描边。  
Tip: 在最开始的时候相当于调用了一次 beginPath()。  
Tip: 同一个路径内的多次setFillStyle()、setStrokeStyle()、setLineWidth()等设置，以最后一次设置为准。

②.关闭路径：ctx.closePath()  
Tip: 关闭路径会连接起点和终点。  
Tip: 如果关闭路径后没有调用 fill() 或者 stroke() 并开启了新的路径，那之前的路径将不会被渲染。

const ctx = wx.createCanvasContext('myCanvas') ctx.moveTo(10, 10) ctx.lineTo(100, 10) ctx.lineTo(100, 100) ctx.closePath() ctx.stroke() ctx.draw()

![Image 1][] ![20170504104047799][]

3.线段：moveTo(10, 10)，lineTo(110, 60)参数都是点的坐标

const ctx = wx.createCanvasContext('myCanvas') ctx.moveTo(10, 10) ctx.rect(10, 10, 100, 50) ctx.lineTo(110, 60) ctx.stroke() ctx.draw()

![20170504104059331][]  
![Image 1][]

ab就是moveTo(10, 10)，lineTo(110, 60)绘制出的线段

4.画一条弧线：

ctx.arc(起点x1,起点y1,半径, 起始弧度,终止弧度,可选 弧度方向<false顺时针，true逆时针，默认是顺时针>)  
  
Tip: 创建一个圆可以用 arc() 方法指定其实弧度为0，终止弧度为 2 \* Math.PI。  
  
Tip: 用 stroke() 或者 fill() 方法来在 canvas 中画弧线。

var app = getApp() Page({ onLoad: function() { const ctx = wx.createCanvasContext('myCanvas') // 绘制一个灰色园 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() //坐标系4个点的数字 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) // 绘制圆心那个点 ctx.beginPath() ctx.arc(100, 75, 2, 0, 2 * Math.PI) ctx.setFillStyle('lightgreen') ctx.fill() //绘制1.5*PI的那个点 ctx.beginPath() ctx.arc(100, 25, 2, 0, 2 * Math.PI) ctx.setFillStyle('blue') ctx.fill() //绘制0的那个点 ctx.beginPath() ctx.arc(150, 75, 2, 0, 2 * Math.PI) ctx.setFillStyle('red') ctx.fill() // 绘制黑线的弧度 ctx.beginPath() ctx.arc(100, 75, 50, 0, 1.5 * Math.PI) ctx.setStrokeStyle('#333333') ctx.stroke() ctx.draw() } })

![Image 1][]![20170504104112945][]

5.文字

ctx.setFontSize(20):字体的大小

ctx.setTextAlign('left');设置文字的对齐left,right,center

ctx.fillText('文字', 文字在画布中起点x1,起点y1):在画布上绘制被填充的文本。

const ctx = wx.createCanvasContext('myCanvas')
    
    ctx.setFontSize(20)
    ctx.fillText('Hello', 20, 20)
    ctx.fillText('MINA', 100, 100)
    
    ctx.draw()

![20170504105219366][]  
6.渐变

grd.addColorStop(渐变点在起点和终点中的位置<0-1>, '颜色')：颜色渐变  
Tip: 小于最小 stop 的部分会按最小 stop 的 color 来渲染，大于最大 stop 的部分会按最大 stop 的 color 来渲染。  
Tip: 需要使用 addColorStop() 来指定渐变点，至少要两个。

①线性渐变:ctx.createLinearGradient(起点x1, 起点y1, 终点x2,终点y2)  
Tip: 需要使用 addColorStop() 来指定渐变点，至少要两个

onLoad: function() {
    		const ctx = wx.createCanvasContext('myCanvas')
    
    		// 创建线性渐变
    		const grd = ctx.createLinearGradient(0, 0, 200, 0)
    		grd.addColorStop(0, 'red')
    		grd.addColorStop(1, 'white')
    
    		// 绘制图形
    		ctx.setFillStyle(grd)
    		ctx.fillRect(10, 10, 150, 80)
    		ctx.draw()
    	}

![20170504110838859][]

②圆形渐变：ctx.createCircularGradient(圆点x,圆点y,半径)  
Tip: 起点在圆心，终点在圆环。  
Tip: 需要使用 addColorStop() 来指定渐变点，至少要两个。

onLoad: function() {
    		const ctx = wx.createCanvasContext('myCanvas')
    		// 创建圆形渐变
    		const grd = ctx.createCircularGradient(75, 50, 40)
    		grd.addColorStop(0, 'red')
    		grd.addColorStop(1, 'white')
    
    		// 绘制图形
    		ctx.setFillStyle(grd)
    		ctx.fillRect(10, 10, 150, 100)
    		ctx.draw()
    	}

![20170504111426510][]

7.阴影：ctx.setShadow(阴影x偏移, 阴影y偏移,模糊级别，数值越大越模糊, '颜色')  
Tip: 如果没有设置，offsetX 默认值为0， offsetY 默认值为0， blur 默认值为0，color 默认值为 black。

const ctx = wx.createCanvasContext('myCanvas')
    ctx.setFillStyle('red')
    ctx.setShadow(10, 50, 50, 'blue')
    ctx.fillRect(10, 10, 150, 75)
    ctx.draw()

![20170504110459091][]

8.旋转

①scale(x,y)方法对横纵坐标进行缩放:多次调用scale，倍数会相乘。

const ctx = wx.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()

![20170504105558093][]

②ctx.rotate(旋转的角度)：对坐标轴进行顺时针旋转.  
以弧度计(degrees \* Math.PI/180；degrees范围为0~360)  
以原点为中心，原点可以用 translate方法修改。顺时针旋转当前坐标轴。多次调用rotate，旋转的角度会叠加。

const ctx = wx.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()

![20170504105924167][]

③translate(x坐标平移量,y坐标平移量)对坐标原点进行缩放

const ctx = wx.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()

![20170504110137180][]

9.线条样式

①线条的宽度：ctx.setLineWidth(宽度px)  
线条的端点样式:ctx.setLineCap('round');   值：'butt'、'round'、'square'

onLoad: function() {
    		const ctx = wx.createCanvasContext('myCanvas');
    		//绘制线段
    		ctx.moveTo(10, 10);
    		ctx.lineTo(150, 10);
    		ctx.stroke();
    
    		//线条的端点样式:butt
    		ctx.beginPath();
    		ctx.setLineCap('butt');
    		ctx.setLineWidth(10);
    		ctx.moveTo(10, 30);
    		ctx.lineTo(150, 30);
    		ctx.stroke();
    
    		//线条的端点样式:round
    		ctx.beginPath();
    		ctx.setLineCap('round');
    		ctx.setLineWidth(10);
    		ctx.moveTo(10, 50);
    		ctx.lineTo(150, 50);
    		ctx.stroke();
    
    		//线条的端点样式:square
    		ctx.beginPath();
    		ctx.setLineCap('square');
    		ctx.setLineWidth(10);
    		ctx.moveTo(10, 70);
    		ctx.lineTo(150, 70);
    		ctx.stroke();
    
    		ctx.draw();
    	}

![20170504112239318][]

②线条的交点样式:ctx.setLineJoin('bevel')   值：'bevel'、'round'、'miter'  
最大斜接长度：ctx.setMiterLimit(2)  
斜接长度指的是在两条线交汇处内角和外角之间的距离。

当 setLineJoin() 为 miter 时才有效。超过最大倾斜长度的，连接处将以 lineJoin 为 bevel 来显示

const ctx = wx.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();
    	}

![20170504112803556][]

10.全局画笔透明度：ctx.setGlobalAlpha(0.2)

Tip：这个只针对在ctx.setGlobalAlpha(0.2);背后的图形有影响，在它之前的，则没有影响

onLoad: function() {
    		const ctx = wx.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();
    	}

![20170504113358818][]

11.保存/恢复

在绘制一个整体的元素，特别是使用了图像变换时头尾必须采用save()，restore()  
context.save();//保存  
图像变换  
设置状态  
绘制(填充或是描边)  
context.restore();//恢复

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()

![20170504113600555][]

[.]: https://mp.weixin.qq.com/debug/wxadoc/dev/api/canvas/reference.html
[20170504092219697]: /images/20210813/56400fdb8ff2466cbd82e593bb28a960.png
[20170504092234731]: /images/20210813/16dc42a544c544d6865bdbe79e7ba380.png
[20170504092347839]: /images/20210813/0bc474bd5bb746f9b3a167252dc95b21.png
[20170504092404686]: /images/20210813/6a5b7fc9df1f414d9582f15a639d985c.png
[20170504092419073]: /images/20210813/fc1d0d0a09a54edb83267f1c6f407345.png
[20170504092458777]: /images/20210813/49b1368b436e450b99f83bc2710dcaa6.png
[Image 1]: 
[20170504103858629]: /images/20210813/88b457b8d1964716b5876627a7b70dc2.png
[20170504103912595]: /images/20210813/50976944d7954664aa6b94a3940b4c36.png
[tongue.gif]: /images/20210813/dcac79902d5c4fc4b35f4e51c63c30ac.png
[20170504094904064]: /images/20210813/84cedf309c994c30947b93654f90bee8.png
[20170504103941881]: /images/20210813/c8ec490b622e4e8695bb9e0ae4427f0e.png
[20170504103953345]: /images/20210813/4e13d2ab54134e1f80b50f4a30c1c0a9.png
[20170504104008709]: /images/20210813/c0b55ff20dab4b4c8c0706702124c82e.png
[20170504104026257]: /images/20210813/c3d00b4c548945e587c2ad8216105a4c.png
[20170504104047799]: /images/20210813/226e9edc222c4b27905034be248a2ab3.png
[20170504104059331]: /images/20210813/1fd139b324df4ccaa0e05e89ba7c0c52.png
[20170504104112945]: /images/20210813/0556944c7a014a6aa466d89501ecfb44.png
[20170504105219366]: /images/20210813/7e9557ec684c4108b1b13b4f3d7f118a.png
[20170504110838859]: /images/20210813/7ff81b233ec94c2e9e41dfb13529a7f0.png
[20170504111426510]: /images/20210813/da5b4f5b51e24c95947a9679f141f019.png
[20170504110459091]: /images/20210813/4dba2273af04433f855b6109c23c4965.png
[20170504105558093]: /images/20210813/79ceb14b03d847d4b9ae60a27e84002e.png
[20170504105924167]: /images/20210813/b8b4ff88293d40dfb722d08dabfe7fa4.png?
[20170504110137180]: /images/20210813/ddfda1e9c1b64545a2f8e6cb737c3d5d.png
[20170504112239318]: /images/20210813/7ea72beab76e47b4933cf4cda1f14921.png
[20170504112803556]: /images/20210813/59b888a6060a44dfade1111f5ecd50b2.png
[20170504113358818]: /images/20210813/20e3d570f96a475982ec11840a3c9b47.png
[20170504113600555]: /images/20210813/8e03b43e88424d62aa353884ef4dede3.png