058 ∞ 画布：canvas
本帖最后由 不二如是 于 2018-7-6 10:49 编辑http://xxx.fishc.com/forum/201805/02/171248f4zdsipf6d4qjnjl.png
上一讲我们搞定了camer，本次来学习canvas。
canvas，画布，属性：
属性名 类型 默认值 说明
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'}
canvas 标签默认宽度300px、高度225px。
同一页面中的 canvas-id 不可重复。
如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作。
所有在<canvas/>中的画图必须用 JavaScript 完成，index.wxml：
<canvas canvas-id="myCanvas" style="border: 1px solid;"/>
index.js，第一步：创建一个 Canvas 绘图上下文。
首先，我们需要创建一个 Canvas 绘图上下文 CanvasContext。
CanvasContext 是小程序内建的一个对象，有一些绘图的方法：
Page({
onLoad: function (e) {
const ctx = wx.createCanvasContext('myCanvas')
}
})
第二步：使用 Canvas 绘图上下文进行绘图描述
接着，我们来描述要在 Canvas 中绘制什么内容。
设置绘图上下文的填充色为鱼C元气绿：
ctx.setFillStyle('#2ebb96')
用fillRect(x, y, width, height)方法画一个矩形，填充为刚刚设置的颜色：
ctx.fillRect(10, 10, 150, 75)
第三步：画图
告诉<canvas/>组件你要将刚刚的描述绘制上去：
ctx.draw()
canvas 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。
请勿在scroll-view、swiper、picker-view、movable-view中使用 canvas 组件。
css 动画对 canvas 组件无效。
避免设置过大的宽高，在安卓下会有crash的问题。
课后作业
1、同一页面中的 canvas-id 不可重复（T/F）
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢小程序，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif
页:
[1]