canvas

画布。

属性说明

属性名类型默认值说明平台差异说明
canvas-idStringcanvas 组件的唯一标识符
disable-scrollBooleanfalse当在 canvas 中移动时且有绑定手势事件时,禁止屏幕滚动以及下拉刷新头条小程序不支持
@touchstartEventHandle手指触摸动作开始头条小程序不支持
@touchmoveEventHandle手指触摸后移动头条小程序不支持
@touchendEventHandle手指触摸动作结束头条小程序不支持
@touchcancelEventHandle手指触摸动作被打断,如来电提醒,弹窗头条小程序不支持
@longtapEventHandle手指长按 500ms 之后触发,触发了长按事件后进行移动不会触发屏幕的滚动头条小程序不支持
@errorEventHandle当发生错误时触发 error 事件,detail = {errMsg: 'something wrong'}头条小程序不支持

注意事项:

  • canvas 标签默认宽度 300px、高度 225px,动态修改 canvas 大小后需要重新绘制。
  • 同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作。
  • canvas 在微信小程序、百度小程序中为原生组件,层级高于前端组件,请勿内嵌在 scroll-view、swiper、picker-view、movable-view 中使用。解决 canvas 层级过高无法覆盖,参考 native-component
  • canvas 在App端 vue 页面不是原生组件,目前App端 nvue 还不支持 canvas 组件。示例:
  1. <template>
  2. <view>
  3. <canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>
  4. <canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas"></canvas>
  5. <canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" @error="canvasIdErrorCallback"></canvas>
  6. </view>
  7. </template>
  1. export default {
  2. onReady: function (e) {
  3. var context = uni.createCanvasContext('firstCanvas')
  4. context.setStrokeStyle("#00ff00")
  5. context.setLineWidth(5)
  6. context.rect(0, 0, 200, 200)
  7. context.stroke()
  8. context.setStrokeStyle("#ff0000")
  9. context.setLineWidth(2)
  10. context.moveTo(160, 100)
  11. context.arc(100, 100, 60, 0, 2 * Math.PI, true)
  12. context.moveTo(140, 100)
  13. context.arc(100, 100, 40, 0, Math.PI, false)
  14. context.moveTo(85, 80)
  15. context.arc(80, 80, 5, 0, 2 * Math.PI, true)
  16. context.moveTo(125, 80)
  17. context.arc(120, 80, 5, 0, 2 * Math.PI, true)
  18. context.stroke()
  19. context.draw()
  20. },
  21. methods: {
  22. canvasIdErrorCallback: function (e) {
  23. console.error(e.detail.errMsg)
  24. }
  25. }
  26. }

相关 api:uni.createCanvasContext

扩展阅读

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

关于图表,H5端流行的echart报表因为涉及大量dom操作,无法跨端使用,而wx-chart在跨端和更新方面都不足,推荐使用uChart组件。但由于小程序和App在跟手操作和js操作帧动画方面性能不如web,如果这方面的需求,建议在web-view组件中使用html内嵌原版echart。


发现错误?想参与编辑?在 GitHub 上编辑此页面!