×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

创新互联百度小程序教程：canvas画布

canvas 画布

基础库版本 1.12.0 开始支持事件捕获、冒泡。

网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、重庆小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了宝安免费建站欢迎大家使用！

解释：画布。画布是一个矩形区域（默认宽度 300px、高度 225px ），开发者可以在页面上绘制图形。canvas 拥有多种绘制路径、矩形、图形、字符以及添加图像的方法。相关 API：swan.createCanvasContext 该组件是客户端创建的原生组件，使用时请注意相关限制。

属性说明

属性名 类型 默认值 必填 说明

canvas-id

String

是

canvas 组件的唯一标识符

disable-scroll

Boolean

false

否

当在 canvas 中移动且有绑定手势事件时，禁止屏幕滚动以及下拉刷新

bindtouchstart

EventHandle

否

手指触摸动作开始

bindtouchmove

EventHandle

否

手指触摸后移动

bindtouchend

EventHandle

否

手指触摸动作结束

bindtouchcancel

EventHandle

否

手指触摸动作被打断，如来电提醒，弹窗

bindlongtap

EventHandle

否

手指长按 350ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动

binderror

EventHandle

否

当发生错误时触发 error 事件，detail = {errMsg: ‘something wrong’}

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

 
 
 
    
  
  
  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.  canvas-id="mycanvas"
    5. 
  
  
  
  5.  disable-scroll="false"
    6. 
  
  
  
  6.  bindtouchstart="touchstart"
    7. 
  
  
  
  7.  bindtouchmove="touchmove"
    8. 
  
  
  
  8.  bindtouchend="touchend"
    9. 
  
  
  
  9.  bindtouchcancel="touchcancel"
    10. 
  
  
  
  10.  bindlongtap="longtap"
    11. 
  
  
  
  11.  binderror="error">
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13.  {{resultComment}}
    14. 
  
  
  
  14.  
    15. 
  
  
  
    16.

Bug & Tip

  • Tip：canvas 组件不能使用动画进行控制。

网页标题：创新互联百度小程序教程：canvas画布
文章链接：http://cdbrznjsb.com/article/cdsoesd.html

其他资讯

  • 网站建设专属方案

  • 网站定制化设计

  • 7X24小时服务

  • N对管家服务

让你的专属顾问为你服务