微信小程序学习笔记(二)- 小程序中的canvas
来源:互联网 发布:阿里云上小号 编辑:程序博客网 时间:2024/05/17 09:35
前段时间部门里面的前端同事,在熟悉微信小程序时遇到了一个坎,大概就是说小程序里面的canvas绘制图像不起作用。这次学习就以canvas为主题,试试看能不能解决这个问题。
先扔两个传送门在这里:
文档·小程序canvas标签
文档·小程序api-canvas
然后先仿照着官方文档在canvas标签里面画最简单的线条图形,官方是一个笑脸,我准备画一个弯月。
一、小程序绘制线条图形
代码:
<!-- canvas.wxml --><canvas style="width: 300px; height: 200px;" canvas-id="wxCanvasTest1"></canvas>
// canvas.jsPage({ canvasIdErrorCallback: function (e) { console.error(e.detail.errMsg) }, onReady: function (e) { //使用wx.createContext获取绘图上下文context var context = wx.createContext() context.setStrokeStyle("#FFD700") context.setLineWidth(2) context.arc(100, 100, 60, -Math.PI/2, Math.PI, false) context.moveTo(100, 40) context.arc(65.36, 100, 69.28, -Math.PI/3, 2*Math.PI/3, false) context.stroke() //调用wx.drawCanvas,通过canvasId指定在哪张画布上绘制,通过actions指定绘制行为 wx.drawCanvas({ canvasId: 'wxCanvasTest1', actions: context.getActions() //获取绘图动作数组 }) }})
运行调试结果:
至此,算是对小程序的canvas标签和绘图api有了初步的了解,然后试着调试一下博文开头提到的问题,微信canvas绘图不起作用
二、小程序绘制图像
稍微改了一下官方的示例代码:
<!--drawimage.wxml --><canvas canvas-id="1" class="canvas" />
//drawCanvas.jsPage({ onReady: function(e) { var context = wx.createContext() wx.chooseImage({ sizeType: ['compressed'], success: function(res) { context.drawImage(res.tempFilePaths[0], 20, 20,250,140) // context.rotate(5 * Math.PI / 180) wx.drawCanvas({ canvasId: 1, actions: context.getActions() }) } }) }})这样显示的图像:
调试成功!下一步尝试对图片进行简单处理(如旋转)
context.rotate(5 * Math.PI / 180)显示:
至此学习目的达成,遗憾的是微信小程序的绘图功能有限,不能对图像进行矩阵变换等处理,因此不能适用更多的需求。希望以后微信能开放更多的功能!
0 0
- 微信小程序学习笔记(二)- 小程序中的canvas
- 小程序学习笔记(二)
- 小程序学习(二)
- 单片机 学习笔记(二)——简单小程序
- 微信小程序学习笔记(二)
- 小程序学习笔记
- canvas画图小程序
- 小程序自学笔记(零基础学小程序汇总)---史上最全的微信小程序学习笔记,笔记看我你也就学会小程序了
- 小程序学习笔记之一(框架结构)
- 小程序学习笔记(一)
- 小程序学习笔记(三)
- 微信小程序笔记(二)
- 微信小程序小笔记
- C语言程序学习(二)笔记
- EJB学习笔记二(HelloWorld程序)
- 程序猿学习笔记(二)
- 微信小程序,学习笔记(二)样式(WXSS)及一个简单的小测试用例
- Java学习笔记(二)-------客户端一对多(TCP)多人聊天小程序
- 数据库建表原则
- 深度行研:危机四伏的传统健身馆,如何杀出一条血路
- live555MediaServer搭建RTSP服务器
- 顺序表的C语言实现
- Oracle 11G 数据库 安装 先决条件失败 解决办法
- 微信小程序学习笔记(二)- 小程序中的canvas
- FreeRTOS系列第1篇---为什么选择FreeRTOS?
- 不使用(a+b)/2这种方式,求两个数的平均值
- 使用Timer出现的问题
- tomcat运行找不到maven的包,会找不到各种已经存在的maven下载好的包
- 详解统计信号处理之 克拉美罗界
- 用DCOS和marathon-lb实现服务发现和负载均衡:第二部分
- web_美团数据采集之_js网络访问同步问题
- Android百度地图