1000字范文 > 微信小程序使用canvas画布

微信小程序使用canvas画布

时间：2024-02-23 06:00:51

相关推荐

微信小程序使用canvas画布

如何使用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()ctx.rect(7 * rpx, 185 * rpx, 332 * rpx, 250 * rpx)ctx.setFillStyle('#fff')ctx.fill()//运动周报背景矩形样式ctx.drawImage('/img/me/weekBackgroung.png', 120 * rpx, 7 * rpx, 112 * rpx, 28 * rpx)//用户头像var avatarurl_width = 44 * rpx; //绘制的头像宽度var avatarurl_heigth = 44 * rpx; //绘制的头像高度var avatarurl_x = 150 * rpx; //绘制的头像在画布上的位置var avatarurl_y = 47 * rpx; //绘制的头像在画布上的位置ctx.save(); //保存ctx.beginPath(); //开始绘制//先画个圆前两个参数确定了圆心（x,y）坐标第三个参数是圆的半径第四，五参数是起始角，第六参数是绘图方向默认是false，即顺时针ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false); //创建一条弧线(圆心的 x 坐标,y坐标,半径,起始弧度，终止弧度,弧度的方向是否是逆时针)ctx.clip(); //画好了圆剪切原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内这也是我们要save上下文的原因// console.log("chartImg",this.data.chartImg);ctx.drawImage(this.data.userpic, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片，必须是https图片ctx.restore(); //恢复之前保存的绘图上下文恢复之前保存的绘图上下文即状态还可以继续绘制//用户名ctx.setFontSize(14) //设置文本大小 + 字体ctx.setFillStyle("#333333");// ctx.textAlign = 'center'//文字水平居中// ctx.textBaseline = 'middle'//垂直居中ctx.fillText(this.data.userInfo.enName, 140 * rpx, 117 * rpx) //在画布上绘制被填充的文本//时间区间圆角ctx.setFillStyle("#ECFAFD"); //设置填充色this.roundRect(ctx, 105 * rpx, 140 * rpx, 150 * rpx, 22 * rpx, 16 * rpx); //（ctx canvas上下文，x坐标，y坐标，宽度，高度，圆角的半径）ctx.fillText('鹅步走', 75 * rpx, 475 * rpx)//分享二维码图片建议在外先生成再在画布中使用ctx.drawImage(this.data.epic, 275 * rpx, 450 * rpx, 56 * rpx, 56 * rpx)ctx.draw()

绘制圆角矩形

//绘制圆角矩形方法一roundRect(ctx, x, y, w, h, r) {//绘制圆角矩形(无填充色))ctx.save(); //保存绘图上下文。if (w < 2 * r) {r = w / 2;}if (h < 2 * r) {r = h / 2;}ctx.beginPath(); //开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边ctx.setStrokeStyle('#fff'); //设置描边线条颜色// ctx.setFillStyle("#ccc");// ctx.setLineWidth(1);//设置线条的宽度// ctx.setFillStyle("#ccc");ctx.moveTo(x + r, y); //把路径移动到画布中的指定点(起点)，不创建线条。用 stroke 方法来画线条ctx.arcTo(x + w, y, x + w, y + h, r); //画线路径ctx.arcTo(x + w, y + h, x, y + h, r);ctx.arcTo(x, y + h, x, y, r);ctx.arcTo(x, y, x + w, y, r);ctx.fill(); //对当前路径描边ctx.closePath(); //关闭一个路径。会连接起点和终点。如果关闭路径后没有调用 fill 或者 stroke 并开启了新的路径，那之前的路径将不会被渲染},

温馨提示：不建议使用textAlign = 'center'//文字水平居中 textBaseline = 'middle'//垂直居中这两个字段，会造成真机上的不确定性，破坏画布的正常显示