微信小程序使用canvas画布

最新推荐文章于 2024-08-15 09:44:15 发布

昨日青空569

最新推荐文章于 2024-08-15 09:44:15 发布

阅读量2.6k

点赞数

分类专栏：微信小程序 canvas 文章标签： javascript 微信小程序

本文链接：https://blog.csdn.net/qq_62303965/article/details/124269823

版权

本文介绍了微信小程序中使用canvas进行绘图的方法，包括wxhl和js部分，详细讲解了如何绘制圆角矩形。建议查阅相关canvas API详解以获取更全面的知识。

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

如何使用canvas

一、wxhl

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

请忽略一下正文的*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(