2. 教程
  3. 7.微信小程序画布

7.微信小程序画布 微信小程序

shuke 2017-11-29 1622

微信小程序的画布CANVAS实际上大量使用了H5的画布的方法：

一，首先要定义好标签

<canvas canvas-id='hb' style='width:320px;height:400px;background:lightblue'></canvas>

二，使用脚本文件对画面进行渲染
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
var context = wx.createContext()
context.beginPath()
context.setStrokeStyle("red")
context.setLineWidth(5)
context.rect(10, 150, 280, 200)
context.stroke()
context.beginPath()
context.setStrokeStyle("darkblue")
context.moveTo(170, 100)
context.arc(150, 100, 20, 0, 2 * Math.PI);
context.fill()
context.stroke()
context.beginPath()
context.setStrokeStyle("green")
context.setLineWidth(5)
context.moveTo(0, 150)
context.lineTo(150, 0)
context.lineTo(300, 150)
context.stroke()
wx.drawCanvas({
canvasId: 'hb',
actions: context.getActions()
})
},
效果图：
注意以下：
  1. canvas 标签默认宽度300px、高度225px
  2. 同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作
  3. 要画不同颜色及不同粗细的效果，要使用开始context.beginPath()与结束来完成context.stroke()，再进行下一个效果的操作。同时填充使用context.fill()完成；
     
  4. 以下是小程序画布的属性：
属性名 类型 默认值 说明
canvas-id String   canvas 组件的唯一标识符
disable-scroll Boolean false 当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新
bindtouchstart EventHandle   手指触摸动作开始
bindtouchmove EventHandle   手指触摸后移动
bindtouchend EventHandle   手指触摸动作结束
bindtouchcancel EventHandle   手指触摸动作被打断，如来电提醒，弹窗
bindlongtap EventHandle   手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
binderror EventHandle   当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'}


最新回复 (0)
全部楼主
返回
发新帖
shuke
主题数
263 		帖子数
79 		注册排名
1
作者最近主题：