如何使用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'//垂直居中这两个字段，会造成真机上的不确定性，破坏画布的正常显示

总结

技术小白开发实例，如有不对，欢迎指正交流

具体详细的绘图canvasAPI建议去看这位大神的canvasAPI详解

微信小程序使用canvas画布相关推荐

微信小程序之canvas画布
一.前言只要干不死,就要往死干!!! 本次带来的是关于微信小程序之画布的相关功能,具体详见代码↓ 二.图例功能点:颜色选择.直线.矩形.圆形.画笔.输入框.线条宽度.还有特定图标.橡皮擦 .撤销. ...
微信小程序-基于canvas画画涂鸦
代码地址如下: http://www.demodashi.com/demo/14461.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
解决了：微信小程序使用canvas绘制倒计时圆圈和数字居中的实现
微信小程序使用canvas绘制倒计时圆圈和数字居中的实现 1.显示结果 2.过程: (1)wxml + css <view style="backg ...
微信小程序使用canvas绘图并下载
微信小程序使用canvas绘图并下载实现的功能: canvas绘制页面当前页面可下载文字自动换行实现的效果最终如下图所示: 在这里插入图片描述实现步骤: 1.页面初始化获取屏幕尺寸 onLo ...
html5绘制图形幸运大转盘,微信小程序利用canvas 绘制幸运大转盘功能
小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, resta ...
微信小程序使用canvas绘制二维码实现跳转小程序
开始接到这个需求的时候,我查阅文档获取小程序码 | 微信开放文档发现两种途径需要后端在服务器上调用接口拿到二维码,因为调用的 https://api.weixin.qq.com这个域名是不允许上白 ...
微信小程序利用canvas实现六边形蜘蛛图
微信小程序利用canvas实现六边形蜘蛛图发布时间:2018-01-24 14:30:29 1..wxml <canvas style="width: 200px; height: ...
微信小程序使用canvas绘制海报并保存本地相册
在做微信小程序的时候,很多都会用到生成海报分享功能,刚好最近项目有这个需求,今天就发出来记录下首先是使用canvas绘制一张海报,微信小程序的canvas有老版本和新版本我是用的是新版本代码如下 ...
【微信小程序】小程序使用canvas画布生成分享朋友圈的海报
思路: 利用小程序组件canvas放置一个画布,然后再利用布局吧canvas画布隐藏,让其绘制成的图片显示在我们的前端页面上面就可以了,最后在利用API将图片保存到我们手机上面就完成了. 上代码! w ...

微信小程序使用canvas画布

一、wxhl

二、js

总结

微信小程序使用canvas画布相关推荐

最新文章

热门文章