在微信开发者中画弧线或者圆

最新推荐文章于 2022-10-17 15:55:54 发布

weixin_53938410

最新推荐文章于 2022-10-17 15:55:54 发布

阅读量591

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_53938410/article/details/114933658

版权

本文介绍了如何在微信开发者工具中利用JavaScript实现弧线和圆形的绘制，涵盖了相关图形渲染的基本方法和步骤。

摘要由CSDN通过智能技术生成

在微信开发者中画弧线或者圆

(1).在.wxml中使用canvas
		`<canvas canvas-id="niHao" style="width:320px;height:500px"> </canvas>`//设置 ID与长和宽.
(2)在.js中使用以下代码

在.js文件中使用并且在onRead:function(){}中使用
const ctx = wx.createCanvasContext('myCanvas')
// Draw coordinates
ctx.arc(100, 75, 50, 0, 2 * Math.PI)//分别为圆心的X，Y坐标，半径，起始弧度和终止弧度
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)//设置文本（文本内容，文本所在的X，Y坐标）
ctx.fillText('0.5*PI', 83, 145)//同上
ctx.fillText('1*PI', 15, 78)
ctx.fillText('1.5*P