微信小程序 使用canvas绘图
微信小程序的绘图是使用canvas,canvas的使用和普通的h5的canvas使用一样,没有什么区别
想使用canvas,首先是要在页面是创建canvas标签,如果只是想要获得图片,可以把canvas定位到页面之外
<canvas style="width: 300px; height: 200px;" canvas-id="myCanvas"></canvas>
<button bindtap='click'>canvas绘图</button>
然后就在js里控制canvas绘图,具体的绘图方式可以参考微信小程序官方的API部分的绘图
click:function(){// 使用 wx.createContext 获取绘图上下文 contextlet context = wx.createCanvasContext('firstCanvas')ctx.setFontSize(20);ctx.setFillStyle('#666');ctx.fillText('我是测试信息', 30, 40);
}
canvas绘图里做一个圆形的图片比较麻烦,因为微信小程序的绘图并没有裁剪图片的API,所以只能曲线去完成,完成的思路是先调用save()方法保存之前的操作,然后画一个圆,再使用微信小程序绘图里的clip() 方法,这个方法会在原来的画布上裁剪任意形状,接下来的操作都只能在这个裁剪的区域内,区域外的操作无效,在完成操作后,再使用restore()方法恢复正常操作。
ctx.save()ctx.beginPath()ctx.arc(100, 100, 25, 0, 2*Math.PI)ctx.clip()ctx.drawImage(imagePath, 25, 25)ctx.restore()ctx.draw()
在绘制图片时,如果图片不是本地的,地址应该是调用微信的下载图片接口后返回的临时地址
微信小程序 使用canvas绘图相关推荐
- 微信小程序使用canvas绘图并下载
微信小程序使用canvas绘图并下载 实现的功能: canvas绘制页面 当前页面可下载 文字自动换行 实现的效果最终如下图所示: 在这里插入图片描述 实现步骤: 1.页面初始化获取屏幕尺寸 onLo ...
- 微信小程序使用canvas绘图
微信小程序的绘图是使用canvas,canvas的使用和普通的h5的canvas使用一样,没有什么区别 想使用canvas,首先是要在页面是创建canvas标签,如果只是想要获得图片,可以把canva ...
- 微信小程序使用canvas绘图,圆形头像,网络背景图,文字,虚线,直线
<canvas type="2d" id="shareCanvas0" style="height: 1196rpx;width:578rpx; ...
- 微信小程序使用canvas绘图,并保存下载到本地。圆形头像,虚线网络图片
wxml <button class="btn" type="primary" form-type="submit" bindtap ...
- 微信小程序-基于canvas画画涂鸦
代码地址如下: http://www.demodashi.com/demo/14461.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.c ...
- html5绘制图形幸运大转盘,微信小程序利用canvas 绘制幸运大转盘功能
小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, resta ...
- 解决了:微信小程序使用canvas绘制倒计时圆圈和数字居中的实现
微信小程序使用canvas绘制倒计时圆圈和数字居中的实现 1.显示结果 2.过程: (1)wxml + css <!-- 每道题 --><view style="backg ...
- 微信小程序使用canvas绘制二维码实现跳转小程序
开始接到这个需求的时候,我查阅文档获取小程序码 | 微信开放文档 发现两种途径 需要后端在服务器上调用接口拿到二维码,因为调用的 https://api.weixin.qq.com这个域名是不允许上白 ...
- 微信小程序利用canvas实现六边形蜘蛛图
微信小程序利用canvas实现六边形蜘蛛图 发布时间:2018-01-24 14:30:29 1..wxml <canvas style="width: 200px; height: ...
最新文章
- iOS 11开发教程(二十二)iOS11应用视图实现按钮的响应(2)
- 【python3的学习之路九】函数式编程
- Linux 系统 文件锁 fcntl函数详解
- 【PAT乙级】1051 复数乘法 (15 分)
- another mysql daemon,[守护进程详解及创建,daemon()使用
- 实验报告:抽象数据类型的表现和实现
- Java-抽象类第一篇认识抽象类
- h264解码保存为yuv格式
- 嵌入式Linux系统优化的那些事儿
- 2020计算机保研心得(上岸中科大)
- java spy_Java Spy - 代码跟踪神器
- RecyclerView三种布局下的上拉加载 下拉刷新
- BUUCTF misc 专题(22)隐藏的钥匙
- git进阶 | 03 -如何彻底删除git中的大文件
- 解决报错:OSError: Failed to open file b‘D:\\\xe5\xad\xa6\xe4\xb9\xa0\\scipy-_7cm39vc‘(图文并茂版详细版!!)
- 无人驾驶技术的7大典型应用场景
- 虚拟机从路由器获取宽带拨号账号密码
- java-net-php-python-java国内热映电影影评网站计算机毕业设计程序
- 虚拟机 报错:Unmount and run xfs_repair
- mysql函数if为负数_MySQL的if,case语句