微信小程序解决不支持画布的createConicGradient-编程知识

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

news/2024/11/19 3:34:17/文章来源:https://www.cnblogs.com/yangWanSheng/p/18348279

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

微信小程序中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].nodecanvas.width = 250canvas.height = 250const 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(); // 结束画布路径
        }// 设置图片srcimage.src = '../../assets/image/icon/test2.png'})}