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

使⽤arc()⽅法在微信⼩程序canvas中画弧线 绘图接⼜和⽅法 arc 定义 画⼀条弧线。 Tip: 创建⼀个圆可以⽤ arc() ⽅法指定其实弧度为0 ，终⽌弧度为 2 * Math.PI。 Tip: ⽤ stroke() 或者 fill() ⽅法 在 canvas 中画弧线。 参数 参数 类型 说明 x Number 圆的x坐标 y Number 圆的y坐标 r Number 圆的半径 sAngle Number 起始弧度，单位弧度 （在3点钟⽅向） eAngle Number 终⽌弧度 counterclockwise Boolean 可选。指定弧度的⽅向是逆时针还是顺时针。默认是false ， 即顺时针。 例⼦ const ctx = wx .createCanvasContext(myCanvas) // raw 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) // raw 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() // raw 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 , 7 ) 红⾊: 起始弧度 (0) 蓝⾊: 终⽌弧度 (1. * Math .PI) 绘图接⼜和⽅法 W3Cschool （）最⼤的技术 识分享与学习平台 此篇内容来⾃于⽹站⽤户上传并发布。