创建画布

快应用的 canvas 功能由两部分组成，canvas 组件和渲染脚本。

canvas 组件中，用于绘制图形的部分，称之为 画布。

canvas 组件

和其他组件一样，在快应用 template 中添加即可。同时可为其添加需要的样式。

这里需要注意，与 HTML 中 canvas 不同的是：

• 暂不支持 width、height 属性，尺寸由 style 控制。
• 默认尺寸为 0 x 0。
• 底色默认为白色，background-color 无效。
• 支持 margin 样式，但 padding、border 无效。
• 不能有子节点。
• 获取节点的方式需要采用快应用标准的 $element 方法。

渲染脚本

单独的 canvas 组件仅仅是一个透明矩形，我们需要通过渲染脚本来进一步操作。

首先通过 $element 和 id 来获取 canvas 组件节点，再通过 getContext 方法创建 canvas 绘图上下文。

getContext 方法的参数目前仅支持 '2d'，创建的 canvas 绘图上下文是一个 CanvasRenderingContext2D 对象。

在后续脚本中操作该对象即可绘制图形。

完整示例代码如下：

<template>
  <div class="doc-page">
    <div class="content">
      <canvas class="new-canvas" id="new-canvas"></canvas>
    </div>
  </div>
</template>
<style>
  .content {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .new-canvas {
    height: 380px;
    width: 380px;
  }
</style>
<script>
  export default {
    private: {
      drawComplete: false
    },
    onInit() {
      this.$page.setTitleBar({
        text: 'canvas简单绘制'
      })
    },
    onShow() {
      if (!this.drawComplete) {
        this.drawCanvas()
      }
    },
    drawCanvas() {
      const canvas = this.$element('new-canvas') //获取 canvas 组件
      const ctx = canvas.getContext('2d') //获取 canvas 绘图上下文
      //绘制一个矩形
      ctx.fillStyle = 'rgb(200,0,0)'
      ctx.fillRect(20, 20, 200, 200)
      //绘制另一个矩形
      ctx.fillStyle = 'rgba(0, 0, 200, 0.5)'
      ctx.fillRect(80, 80, 200, 200)
      this.drawComplete = true
    }
  }
</script>

输出效果如图