微信小程序 小程序 canvas画一个圆形

js代码：

 wx.createSelectorQuery()
      .select('#myCanvas') // 在 WXML 中填入的 id
      .fields({ node: true, size: true })
      .exec((res) => {
        // Canvas 对象
        const canvas = res[0].node
        // 渲染上下文
        const ctx = canvas.getContext('2d')

        // Canvas 画布的实际绘制宽高
        const width = res[0].width
        const height = res[0].height

        // 初始化画布大小
        const dpr = wx.getWindowInfo().pixelRatio
        canvas.width = width * dpr
        canvas.height = height * dpr
        ctx.scale(dpr, dpr)

        // 清空画布
        ctx.clearRect(0, 0, width, height)

        // 绘制红色正方形
        //3.绘制
        ctx.beginPath();//开始绘制
        ctx.arc(100, 100, 100, 0, 2 * Math.PI);//arc 的意思是“弧”，如果不理解可以看3c文章
        ctx.fillStyle = "#ff0";//设置填充颜色
        ctx.fill();//开始填充
        ctx.strokeStyle = "blue";//将线条颜色设置为蓝色
        ctx.stroke();//stroke() 方法默认颜色是黑色（如果没有上面一行，则会是黑色）。

      })

wxml代码：

  <canvas id="myCanvas" type="2d" style="border: 1px solid; width: 200px; height: 200px;" />

效果图：

arc定义和用法

arc() 方法创建弧/曲线（用于创建圆或部分圆）。

提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。

提示：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。

弧/曲线
中心：arc(

100,75,

50,0Math.PI,1.5Math.PI)
起始角：arc(100,75,50,

0

,1.5*Math.PI)
结束角：arc(100,75,50,0Math.PI,

1.5Math.PI

)