支付宝小程序画布组件 画布·Canvas

画布。画布是一个矩形区域，用于在页面上绘制图形，开发者可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

相关 API：my.createCanvasContext。

扫码体验

示例代码

<!-- API-DEMO page/component/canvas/canvas.axml -->
<view class="page">
  <view class="canvas-view">
    <canvas 
      id="canvas"
      width="610"
      height="610"
      class="canvas"
      onTouchStart="log"
      onTouchMove="log"
      onTouchEnd="log"
    />
  </view>
</view>
// API-DEMO page/component/canvas/canvas.js
Page({
  onReady() {
    this.point = {
      x: Math.random() * 590,
      y: Math.random() * 590,
      dx: Math.random() * 10,
      dy: Math.random() * 10,
      r: Math.round(Math.random() * 255 | 0),
      g: Math.round(Math.random() * 255 | 0),
      b: Math.round(Math.random() * 255 | 0),
    };


    this.interval = setInterval(this.draw.bind(this), 17);
    this.ctx = my.createCanvasContext('canvas');
  },


  draw() {
    const { ctx } = this;
    ctx.setFillStyle('#FFF');
    ctx.fillRect(0, 0, 610, 610);


    ctx.beginPath();
    ctx.arc(this.point.x, this.point.y, 20, 0, 2 * Math.PI);
    ctx.setFillStyle('rgb(' + this.point.r + ', ' + this.point.g + ', ' + this.point.b + ')');
    ctx.fill();
    ctx.draw();


    this.point.x += this.point.dx;
    this.point.y += this.point.dy;
    if (this.point.x <= 10 || this.point.x >= 590) {
      this.point.dx = -this.point.dx;
      this.point.r = Math.round(Math.random() * 255 | 0);
      this.point.g = Math.round(Math.random() * 255 | 0);
      this.point.b = Math.round(Math.random() * 255 | 0);
    }


    if (this.point.y <= 10 || this.point.y >= 590) {
      this.point.dy = -this.point.dy;
      this.point.r = Math.round(Math.random() * 255 | 0);
      this.point.g = Math.round(Math.random() * 255 | 0);
      this.point.b = Math.round(Math.random() * 255 | 0);
    }
  },
  drawBall() {


  },
  log(e) {
    if (e.touches && e.touches[0]) {
      console.log(e.type, e.touches[0].x, e.touches[0].y);
    } else {
      console.log(e.type);
    }
  },
  onUnload() {
    clearInterval(this.interval);
  },
});
/* API-DEMO page/component/canvas/canvas.acss */
.canvas-view {
  display: flex;
  justify-content: center;
}


.canvas {
  width: 305px;
  height: 305px;
  background-color: #fff;
}

属性

注意：

如果需要在高 DPR（devicePixelRatio）下取得更细腻的显示，需要先将 canvas 用属性设置放大，用样式缩小，例如

<!-- getSystemInfoSync().pixelRatio === 2 -->
<canvas width="200" height="200" style="width:100px;height:100px;"/>

原生 Canvas 组件适配

基础库版本 2.6.2 及以上

支付宝版本 10.2.0 及以上

为了提升性能、优化小程序体验，Canvas 组件会逐步切换为原生 Canvas 组件实现。实际使用中若遇到 iOS 平台上覆盖于 Canvas 组件上的 web 元素（后称：覆盖元素）无法收到 UI 事件时，可以进行如下适配，以确保顺利收到 UI 事件：

以下两个步骤缺一不可：

1. 当前小程序 app.json 的 window 节点中配置 enableComponentOverlayer 为 "YES"

     {
      "pages":[
          "pages/index/index"
      ],
      "window":{
          "enableComponentOverlayer":"YES"
      }
     }

这个配置项用于指示小程序运行时将目标区域内 UI 事件派发给 Canvas 组件

1. 为覆盖元素添加 AF-COMPONENT-OVERLAYER class 属性来指示小程序运行时将 UI 事件派发给覆盖元素，而不传递给后边的 Canvas 组件；若不添加 AF-COMPONENT-OVERLAYER class 属性，则会默认派发给Canvas 组件。

   /* declare style for top class in acss */

   
   .top {
     z-index: 2;
   }

   <!-- axml 中为覆盖元素增加 AF-COMPONENT-OVERLAYER class 属性的样例 -->
   <view class="page">
     <canvas style="width: 100%; height: 500px;"></canvas>
     <!-- 假设下面的View需要盖在 canvas 上（即 z-index 层级要比 canvas 高），那么需要在这个 view 上增加class "AF-COMPONENT-OVERLAYER" 这样-->
       <view class="top AF-COMPONENT-OVERLAYER" onTap="viewClick"  >
       </view>
   </view>

注意：如果在开发中遇到 Canvas 组件上没有可见的 web 元素覆盖（即：开发视角下无覆盖元素）时也收不到 UI 事件，可以只采用步骤 1 来尝试解决。