微信小程序canvas简单使用

index.wxml文件

  <canvas  type="2d"  id="canvas" style="width: 100%; height: 300px;" ></canvas>

index.js文件

const app = getApp()
Page({
	 onLoad() {
	     // 通过 SelectorQuery 获取 Canvas 节点
	     wx.createSelectorQuery()
	     .select('#canvas')
	     .fields({
	       node: true,
	       size: true,
	     })
	     .exec(this.init.bind(this))
 	 },
	init(res) {
	    const width = res[0].width
	    const height = res[0].height
	    const canvas = res[0].node
	    const ctx = canvas.getContext('2d')
	    const dpr = wx.getSystemInfoSync().pixelRatio
	    canvas.width = width * dpr
	    canvas.height = height * dpr
	    ctx.scale(dpr, dpr) // 等比缩放
		
		// 添加背景图片
	    img.src = './bg.jpg'
	    this._img = img
	    ctx.drawImage(this._img, 0, 0, width, height) 
		
	
		// 画圈
	    ctx.beginPath()
	    ctx.arc(100, 75, 10, 0, Math.PI * 2)
	    ctx.fillStyle = '#1aad19'
	    ctx.strokeStyle = 'rgba(1,1,1,0)'
	    ctx.fill()
	    ctx.stroke()
	    ctx.beginPath()
	    ctx.arc(200, 75, 10, 0, Math.PI * 2)
	    ctx.fillStyle = '#1aad19'
	    ctx.strokeStyle = 'rgba(1,1,1,0)' 
	    ctx.fill()
	    ctx.stroke()
	    ctx.beginPath()
	    ctx.arc(150, 165, 10, 0, Math.PI * 2)
	    ctx.fillStyle = '#1aad19'
	    ctx.strokeStyle = 'rgba(1,1,1,0)'
	    ctx.fill()
	    ctx.stroke()
	    
	
	   	// 画线
	    ctx.beginPath();
	    ctx.lineWidth = 1;
	    ctx.moveTo(110, 75);
	    ctx.lineTo(190, 75);
	    ctx.strokeStyle = 'red'
	    ctx.moveTo(110, 75);
	    ctx.lineTo(150, 155);
	    ctx.moveTo(200, 85);
	    ctx.lineTo(150, 155);
	    ctx.stroke();  
  },
})

效果图