微信小程序解决不支持画布的createConicGradient

标签：canvas 微信 createConicGradient ctx 画布 描边 data Math

微信圆环进度条开发，先看效果

 

微信小程序中canvas使用createConicGradient，开发者工具中显示正常，真机上报错，表示createConicGradient方法underfed，然后试一下使用图片放进去，发现微信小程序不支持new Image方法，后面查看微信官方文档有 createImage方法 wxml代码: 

<canvas canvas-id="myCanvasRound" id="myCanvasRound" type="2d" width="250" height="250" class="canvas-style"></canvas>

js代码：

setData() {
    this.setData({
      centerX: 250 / 2,
      centerY: 250 / 2,
      radius: 100, // 圆半径
      startAngle: -0.5 * Math.PI, // 开始角度
      endAngle: -0.5 * Math.PI, // 结束角度
    })
},
// 设置圆环进度，val 数字类型， 范围 0 - 100 
setCircle(val) {

　　let endAngleVal: number = (val - 25) / (5) * 0.1 　　this.setData({ 　　　　endAngle: endAngleVal * Math.PI 　　})

},



  drawCircle() {
    wx.createSelectorQuery()
      .select('#myCanvasRound').fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        canvas.width = 250
        canvas.height = 250
        const ctx = canvas.getContext('2d')
        ctx.clearRect(0, 0, canvas.width, canvas.height) // 清除画布
        ctx.moveTo(0, 0.5); // 使用0.5增量对齐像素，消除锯齿
        // 背景圆弧渲染
        ctx.beginPath();
        ctx.arc(this.data.centerX, this.data.centerY, this.data.radius, 0, 2 * Math.PI);
        ctx.strokeStyle = '#a6a6a6'; // 设置描边颜色  
        ctx.lineWidth = 20; // 设置描边宽度  
        ctx.stroke(); // 描边路径，绘制环形进度条  
        // 进度条渲染
        ctx.beginPath();
        ctx.lineWidth = 20; // 设置描边宽度  
        ctx.lineCap = 'round' // 线条类型

        // 图片对象
        const image = canvas.createImage()
        // 图片加载完成回调
        image.onload = () => {
          // 将图片绘制到 canvas 上
          const pattern = ctx.createPattern(image, "no-repeat");
          ctx.strokeStyle = pattern;
          ctx.arc(this.data.centerX, this.data.centerY, this.data.radius, this.data.startAngle + 0.09, this.data.endAngle, false);
          ctx.stroke(); // 描边路径，绘制环形进度条  

          // 滑动圆点
          ctx.beginPath();
          let whitePoint = {
            x: this.data.centerX + this.data.radius * Math.cos(this.data.endAngle),
            y: this.data.centerY + this.data.radius * Math.sin(this.data.endAngle)
          };
          ctx.strokeStyle = '#FFF'
          ctx.lineCap = 'round';
          ctx.lineWidth = 5;
          ctx.arc(whitePoint.x, whitePoint.y, 6, 0, 2 * Math.PI); // 空心圆
          ctx.stroke();
          ctx.closePath(); // 结束画布路径
        }
        // 设置图片src
        image.src = '../../assets/image/icon/test2.png'
      })
  }

注意的是，所放入的图片大小需要和画布大小相符合，不然会出现图片偏移，渲染不全

所使用的图片

 

       

标签：canvas,微信,createConicGradient,ctx,画布,描边,data,Math
From： https://www.cnblogs.com/yangWanSheng/p/18348279