使用canvas之趣味制作（一）矩形

如何插入一段漂亮的代码片

//wxml
<canvas type="2d" id="myCycle"></canvas>

//js
Page({
  onLoad() {
   //一、矩形
    const query = wx.createSelectorQuery()
    query.select('#myCanvas').fields({ node: true, size: true }).exec(res => {
      const canvas = res[0].node
      const ctx = canvas.getContext('2d')
      const dpr = wx.getSystemInfoSync().pixelRatio
      canvas.width = res[0].width * dpr
      canvas.height = res[0].height * dpr
      ctx.scale(dpr, dpr)
		//(开始圆心x,开始圆心y,开始圆半径，结束圆半径)
      var grd = ctx.createLinearGradient(0,0,300,200) 
      grd.addColorStop(0.3,"#ff0000");
      grd.addColorStop(0.8,"#0000ff");
      ctx.fillStyle = grd;
      ctx.fillRect(0,0,300,150);     //填充大小、位置  (x,y width,height)
      // ctx.fillStyle = '#2C95FC'   //填充颜色
       
    })
 }
})