您的位置:58脚本 > 微信小程序canvas画圆 使用arc()方法在微信小程序canvas中画弧线

微信小程序canvas画圆 使用arc()方法在微信小程序canvas中画弧线

2023-04-15 17:32

微信小程序canvas画圆 使用arc()方法在微信小程序canvas中画弧线

微信小程序canvas画圆 使用arc()方法在微信小程序canvas中画弧线

微信小程序canvas画圆

微信小程序 canvas接口和方法绘图接口和方法


canvasContext.arc


定义

画一条弧线。

Tip: 创建一个圆可以用arc()方法指定起始弧度为0,终止弧度为2 * Math.PI

Tip: 用stroke()或者fill()方法来在 canvas 中画弧线。

参数

参数类型说明
xNumber圆的x坐标
yNumber圆的y坐标
rNumber圆的半径
sAngleNumber起始弧度,单位弧度(在3点钟方向)
eAngleNumber终止弧度
counterclockwiseBoolean可选。指定弧度的方向是逆时针还是顺时针。默认是false,即顺时针。

例子

const ctx = wx.createCanvasContext("myCanvas")

// Draw coordinates
ctx.arc(100, 75, 50, 0, 2 * Math.PI)
ctx.setFillStyle("#EEEEEE")
ctx.fill()

ctx.beginPath()
ctx.moveTo(40, 75)
ctx.lineTo(160, 75)
ctx.moveTo(100, 15)
ctx.lineTo(100, 135)
ctx.setStrokeStyle("#AAAAAA")
ctx.stroke()

ctx.setFontSize(12)
ctx.setFillStyle("black")
ctx.fillText("0", 165, 78)
ctx.fillText("0.5*PI", 83, 145)
ctx.fillText("1*PI", 15, 78)
ctx.fillText("1.5*PI", 83, 10)

// Draw points
ctx.beginPath()
ctx.arc(100, 75, 2, 0, 2 * Math.PI)
ctx.setFillStyle("lightgreen")
ctx.fill()

ctx.beginPath()
ctx.arc(100, 25, 2, 0, 2 * Math.PI)
ctx.setFillStyle("blue")
ctx.fill()

ctx.beginPath()
ctx.arc(150, 75, 2, 0, 2 * Math.PI)
ctx.setFillStyle("red")
ctx.fill()

// Draw arc
ctx.beginPath()
ctx.arc(100, 75, 50, 0, 1.5 * Math.PI)
ctx.setStrokeStyle("#333333")
ctx.stroke()

ctx.draw()


针对arc(100, 75, 50, 0, 1.5 * Math.PI)的三个关键坐标如下:

  • 绿色: 圆心 (100, 75)
  • 红色: 起始弧度 (0)
  • 蓝色: 终止弧度 (1.5 * Math.PI)

微信小程序 canvas接口和方法绘图接口和方法

阅读全文
以上是58脚本为你收集整理的微信小程序canvas画圆 使用arc()方法在微信小程序canvas中画弧线全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 58脚本 58jiaoben.com 版权所有 联系我们
桂ICP备12005667号-28 Powered by CMS