微信小程序canvas绘制图形基本

//1.创建绘图上下文
    const ctx = wx.createCanvasContext("myCanvas");
    //画填充的矩形
    ctx.fillRect(0,0,90,20);
img1.png


//画矩形
    ctx.strokeRect(0, 30, 90, 20);
img2.png


//划线
    ctx.moveTo(0, 90)
    ctx.lineTo(90, 90)
    ctx.stroke()

img3.png


//画字
    ctx.setFontSize(20)
    ctx.setTextAlign('left')
    ctx.fillText('测试', 20, 120)

img4.png


    //画弧线
    //ctx.arc(起点x1,起点y1,半径, 起始弧度,终止弧度,可选 弧度方向<false顺时针,true逆时针,默认是顺时针>)
    ctx.beginPath()
    ctx.arc(30, 140, 30, 0, 1 * Math.PI,false)
    ctx.setStrokeStyle('#333')
    ctx.stroke()

不要忘了最后要调用绘制函数ctx.draw()
Tip:
rect() 方法创建矩形。但它并不会真正将矩形画出,只能调用stroke() 或 fill()后才会真正作用于画布。
fill()是更底层的方法,fillRect只用来绘制填充矩形,fill是用来对任意的闭合路径进行填充

img5.png

0 个评论

要回复文章请先登录注册