最新 Canvas 2D 接口--微信小程序的Canvas 实例使用说明

最新推荐文章于 2025-02-24 14:42:02 发布

SlackMoon

最新推荐文章于 2025-02-24 14:42:02 发布

阅读量1k

点赞数

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/m0_61155226/article/details/134114680

版权

本文介绍了如何在微信小程序中使用Canvas2DAPI绘制曲线，包括创建画布、设置样式、绘制圆形和弧线，以及实现最终效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Canvas 2D绘制曲线案例：

1.index.wxml代码

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

2.index.js代码

Page({
  data: {

  },
  onLoad() {

  },
  onShow() {
    wx.createSelectorQuery()
      .select('#myCanvas')
      .fields({ node: true, size: true })
      .exec(res => {
        let ctx = res[0].node.getContext('2d');
        let canvas = res[0].node;

        // 通过设备的像素比等重新绘制宽高
        const dpr = wx.getSystemInfoSync().pixelRatio;
        canvas.width = res[0].width * dpr;
        canvas.height = res[0].height * dpr;
        ctx.scale(dpr, dpr);

        // Clear the canvas (optional)
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // Draw a red circle
        ctx.fillStyle = '#FF0000';
        ctx.beginPath();
        ctx.arc(150, 200, 80, -1, 5.8, true); // (x, y, radius, startAngle, endAngle)
        ctx.stroke()
        ctx.closePath();

        //绘制中部 第一段弧线
        ctx.beginPath()
        ctx.strokeStyle = "red"
        ctx.arc(150, 200, 60, 0, 0.3 * Math.PI, false)
        ctx.stroke()
        //绘制中部 第二段弧线
        ctx.beginPath()
        ctx.strokeStyle = "red"
        ctx.arc(150, 200, 60, 0.8 * Math.PI, 1.2 * Math.PI, false)
        ctx.stroke()
        //绘制中部 第三段弧线
        ctx.beginPath()
        ctx.strokeStyle = "red"
        ctx.arc(150, 200, 60, 1.4 * Math.PI, 1.8 * Math.PI, false)
        ctx.stroke()
        //绘制中心小圆
        ctx.beginPath()
        ctx.strokeStyle = "red"
        ctx.arc(150, 200, 30, 20, 2 * Math.PI, true)
        ctx.closePath()
        ctx.stroke()
        // 开始绘制
        ctx.draw()


      });
  }
})