canvas

画布。

使用示例

扫码预览

用BoosHi扫码或PC端点击

<template>
  <view class="demo-ui-page">
    <view class="demo-title">canvas 画布</view>
    <demo-cell>
      <canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
    </demo-cell>
  </view>
</template>

<script>
	export default {
    data() {
        return {
        }
    },
    mounted() {  // 需在 canvas 渲染完成后执行，若为页面组件，则在onReady生命周期执行
		  var context = bz.createCanvasContext('firstCanvas')
          context.setStrokeStyle("#00ff00")
          context.setLineWidth(5)
          context.rect(0, 0, 200, 200)
          context.stroke()
          context.setStrokeStyle("#1890ff")
          context.setLineWidth(2)
          context.moveTo(160, 100)
          context.arc(100, 100, 60, 0, 2 * Math.PI, true)
          context.moveTo(140, 100)
          context.arc(100, 100, 40, 0, Math.PI, false)
          context.moveTo(85, 80)
          context.arc(80, 80, 5, 0, 2 * Math.PI, true)
          context.moveTo(125, 80)
          context.arc(120, 80, 5, 0, 2 * Math.PI, true)
          context.stroke()
          context.draw()
    }
	}
</script>

<style>

</style>

展开 刷新 关闭

属性说明

属性名	类型	默认值	说明
canvas-id	String		canvas 组件的唯一标识符
disable-scroll	Boolean	false	当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新
hidpi	Boolean	true	是否启用高清处理
@longtap	EventHandle		手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
@error	EventHandle		当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'}

注意事项：

• canvas 标签默认宽度 300px、高度 225px，动态修改 canvas 大小后需要重新绘制。
• 单个尺寸过大的 canvas 在 iOS/Safari 无法绘制（具体限制尺寸未公布）。
• 同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作。
• 小程序因为通信阻塞，难以绘制非常流畅的 canvas 动画。