微信小程序 小程序 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;" />

效果图:
2023-11-21T12:39:36.png

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

)

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容