微信小程序使用canvas画布_小程序画布arcto

如何使用canvas

一、wxhl

<canvas canvas-id="myShareCanvasTemp" style="width: 100%;height: 100%;" />
1

请忽略一下正文的*rpx,该代码片段为实例代码片段复制，rpx是为适应不同机型所做的适配

二、js

  const ctx = wx.createCanvasContext('myShareCanvasTemp')//获取canvas  id
    //绘制最大背景
    ctx.beginPath()
    ctx.setFillStyle('#ECFAFD')
    this.roundRect(ctx, 0, 0, 345 * rpx, 515 * rpx, 8 * rpx); //（ctx canvas上下文，x坐标，y坐标，宽度，高度，圆角的半径），该方法再下面
    // ctx.fill()
    //当一个图形画在另一个图形中，需要使用ctx.closePath()关闭画笔位置在另起ctx.beginPath()画笔位置，要不然会不显示以下绘制
    ctx.closePath()
    ctx.beginPath()
    //绘制两个大的白色背景
    ctx.rect(7 * rpx, 7 * rpx, 332 * rpx, 175 * rpx) //填充一个矩形（x轴坐标,y轴坐标,矩形宽,矩形高）,strokeRect:画一个矩形(非填充)。 用 setStrokeStyle 设置矩形线条的颜色
    ctx.setFillStyle('#fff')
    ctx.fill(
1
2
3
4
5
6
7
8
9
10
11
12