058 ∞ 画布：canvas

不二如是

                               
登录/注册后可看大图

上一讲我们搞定了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：

1. <canvas canvas-id="myCanvas" style="border: 1px solid;"/>

复制代码

index.js，第一步：创建一个 Canvas 绘图上下文。

首先，我们需要创建一个 Canvas 绘图上下文 CanvasContext。

CanvasContext 是小程序内建的一个对象，有一些绘图的方法：

1. Page({
   
2.   onLoad: function (e) {
   
3.     const ctx = wx.createCanvasContext('myCanvas')
   
4.    
   
5.   }
   
6. })
   

复制代码

第二步：使用 Canvas 绘图上下文进行绘图描述

接着，我们来描述要在 Canvas 中绘制什么内容。

设置绘图上下文的填充色为鱼C元气绿：

1. ctx.setFillStyle('#2ebb96')

复制代码

用fillRect(x, y, width, height)方法画一个矩形，填充为刚刚设置的颜色：

1. ctx.fillRect(10, 10, 150, 75)

复制代码

第三步：画图

告诉<canvas/>组件你要将刚刚的描述绘制上去：

1. ctx.draw()

复制代码

canvas 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。

请勿在scroll-view、swiper、picker-view、movable-view  中使用 canvas 组件。

css 动画对 canvas 组件无效。

避免设置过大的宽高，在安卓下会有crash的问题。

---

课后作业


1、同一页面中的 canvas-id 不可重复（T/F）



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢小程序，请订阅 专辑&#9758;（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图