微信小程序使用canvas画不规则图形

一、根据UI在海报中画不同的图片形状的路径，这中用css很简单，用canvas画的话就要了解canvas中的几个方法，

效果图：

代码如下：

Page({canvasIdErrorCallback(e) {console.error(e.detail.errMsg)},onReady(e) {// 使用 wx.createContext 获取绘图上下文 contextconst context = wx.createCanvasContext('firstCanvas')context.save();//开始一个新的绘制路径context.beginPath();//设置路径起点坐标context.moveTo(50, 50);context.arc(50, 50, 50, 0, Math.PI, true); //画圆context.moveTo(0, 50);context.lineTo(0, 100);  //控制绘制图片路径的高度context.lineTo(100, 100); //控制绘制图片路径的高度context.lineTo(100, 50);//先关闭绘制路径。注意，此时将会使用直线连接当前端点和起始端点。context.closePath();context.clip();context.stroke(); //画线轮廓context.drawImage('../../images/1.png', 0, 0, 256, 191);context.restore();context.draw();}
})

这个绘制图片路径相对简单，只要了解canvas基本方法，再调试就能实现

微信小程序使用canvas画不规则图形相关推荐

微信小程序利用canvas画出根据文字自适应的边框
1.需求生成海需要画出一个中空带边框的的tag,如下图.众所周知,微信小程序里的canvas画图都是需要自己一点点画出来,不想html有htmlToCanvas,直接写HTML就可以转成canvas ...
微信小程序使用canvas画海报分享图
项目场景: 很多小程序都会有一些分享海报的需求.因为我这边之前一直都是后端直接生成一张图片然后返回了的,我前端直接把路径放上去就可以了.但是,有时候后端没直接生成海报,而是只生成了一个二维码,这时候就 ...
微信小程序使用canvas画圆形倒计时动画
参考文档:https://www.cnblogs.com/quietxin/p/9418813.html 效果: wxml页面 <view class="container" ...
html5绘制图形幸运大转盘,微信小程序利用canvas 绘制幸运大转盘功能
小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, resta ...
微信小程序使用canvas绘制二维码实现跳转小程序
开始接到这个需求的时候,我查阅文档获取小程序码 | 微信开放文档发现两种途径需要后端在服务器上调用接口拿到二维码,因为调用的 https://api.weixin.qq.com这个域名是不允许上白 ...
微信小程序使用canvas绘图并下载
微信小程序使用canvas绘图并下载实现的功能: canvas绘制页面当前页面可下载文字自动换行实现的效果最终如下图所示: 在这里插入图片描述实现步骤: 1.页面初始化获取屏幕尺寸 onLo ...
关于星空的java小程序_[Java教程]小程序使用Canvas画饼图_星空网
小程序使用Canvas画饼图 2018-10-24 0 先上效果图 -------------------------------------------------------------w --- ...
微信小程序-基于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画不规则图形相关推荐

最新文章

热门文章