前段时间部门里面的前端同事,在熟悉微信小程序时遇到了一个坎,大概就是说小程序里面的canvas绘制图像不起作用。这次学习就以canvas为主题,试试看能不能解决这个问题。
先扔两个传送门在这里:
然后先仿照着官方文档在canvas标签里面画最简单的线条图形,官方是一个笑脸,我准备画一个弯月。
一、小程序绘制线条图形
代码:
<!-- canvas.wxml -->
<canvas style="width: 300px; height: 200px;" canvas-id="wxCanvasTest1"></canvas>
// canvas.js
Page({
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.js
Page({
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)
显示:
至此学习目的达成,遗憾的是微信小程序的绘图功能有限,不能对图像进行矩阵变换等处理,因此不能适用更多的需求。希望以后微信能开放更多的功能!