# canvas

画布。

属性说明

属性名 类型 默认值 说明 平台差异说明
type String 指定 canvas 类型,支持 2d (2.9.0) 和 webgl 微信小程序 2.7.0+ 字节小程序1.78.0+
canvas-id String canvas 组件的唯一标识符
disable-scroll Boolean false 当在 canvas 中移动时且有绑定手势事件时,禁止屏幕滚动以及下拉刷新 字节跳动小程序与飞书小程序不支持
hidpi Boolean true 是否启用高清处理 H5 (HBuilder X 3.4.0+)、App-vue (HBuilder X 3.4.0+)
@touchstart EventHandle 手指触摸动作开始 字节小程序1.78.0+
@touchmove EventHandle 手指触摸后移动 字节小程序1.78.0+
@touchend EventHandle 手指触摸动作结束 字节小程序1.78.0+
@touchcancel EventHandle 手指触摸动作被打断,如来电提醒,弹窗 字节小程序1.78.0+
@longtap EventHandle 手指长按 500ms 之后触发,触发了长按事件后进行移动不会触发屏幕的滚动 字节跳动小程序与飞书小程序不支持
@error EventHandle 当发生错误时触发 error 事件,detail = {errMsg: 'something wrong'} 字节跳动小程序与飞书小程序不支持

注意事项:

  • canvas 标签默认宽度 300px、高度 225px,动态修改 canvas 大小后需要重新绘制。
  • h5、app-vue 中单个尺寸过大的 canvas 在 iOS/Safari 无法绘制(具体限制尺寸未公布)。
  • 同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作。
  • canvas 在微信小程序、百度小程序、QQ小程序中为原生组件,层级高于前端组件,请勿内嵌在 scroll-view、swiper、picker-view、movable-view 中使用。解决 canvas 层级过高无法覆盖,参考 native-component。其他小程序端的 canvas 仍然为 webview 中的 canvas。
  • app-vue 中的 canvas 仍然是 webview 的 canvas。app-nvue下如需使用canvas,需下载插件,详见文档底部章节。
  • app-vue的canvas虽然是webview自带的canvas,但却比nvue和微信小程序的原生canvas性能更高。注意并非原生=更快。canvas动画的流畅,关键不在于渲染引擎的速度,而在于减少从逻辑层向视图层频繁通信造成的折损。
  • 小程序、app-nvue,因为通信阻塞,难以绘制非常流畅的canvas动画。h5和app-vue不存在此问题。但注意,app-vue下若想流畅的绘制canvas动画,需要使用renderjs (opens new window)技术,把操作canvas的js逻辑放到视图层运行,避免逻辑层和视图层频繁通信。hello uni-app的canvas示例很典型,在相同手机运行该示例,可以看出在h5端和app端非常流畅,而小程序端由于没有renderjs技术,做不到这么流畅的动画。

示例: 查看演示 (opens new window)

Template

Script

<template>
	<view>
		<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
		<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" id="secondCanvas"></canvas>
		<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" id="secondCanvas" @error="canvasIdErrorCallback"></canvas>
	</view>
</template>

相关 api:uni.createCanvasContext

扩展阅读

canvas的常用用途有图表和图片处理,在uni-app插件市场有大量基于canvas的插件,可搜索 图表 (opens new window)头像裁剪 (opens new window)海报 (opens new window)二维码 (opens new window)

关于图表

nvue页面如何使用canvas

HBuilderX 2.2.5 开始 nvue 页面支持 Canvas,支持 W3C WebGL API WebGL 1.0 (opens new window)

示例工程地址:NvueCanvasDemo (opens new window)

在App端,从性能来讲,由于通讯阻塞的问题,nvue的canvas性能不可能达到使用renderjs的vue页面的canvas。在App端,推荐使用vue的canvas。

本文内容