支付寶小程序畫布組件 畫布·Canvas

畫布。畫布是一個(gè)矩形區(qū)域，用于在頁面上繪制圖形，開發(fā)者可以控制其每一像素。 canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

相關(guān) API：my.createCanvasContext。

掃碼體驗(yàn)

示例代碼

<!-- 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）下取得更細(xì)膩的顯示，需要先將 canvas 用屬性設(shè)置放大，用樣式縮小，例如

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

原生 Canvas 組件適配

基礎(chǔ)庫版本 2.6.2 及以上

支付寶版本 10.2.0 及以上

為了提升性能、優(yōu)化小程序體驗(yàn)，Canvas 組件會(huì)逐步切換為原生 Canvas 組件實(shí)現(xiàn)。實(shí)際使用中若遇到 iOS 平臺(tái)上覆蓋于 Canvas 組件上的 web 元素（后稱：覆蓋元素）無法收到 UI 事件時(shí)，可以進(jìn)行如下適配，以確保順利收到 UI 事件：

以下兩個(gè)步驟缺一不可：

1. 當(dāng)前小程序 app.json 的 window 節(jié)點(diǎn)中配置 enableComponentOverlayer 為 "YES"

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

這個(gè)配置項(xiàng)用于指示小程序運(yùn)行時(shí)將目標(biāo)區(qū)域內(nèi) UI 事件派發(fā)給 Canvas 組件

1. 為覆蓋元素添加 AF-COMPONENT-OVERLAYER class 屬性來指示小程序運(yùn)行時(shí)將 UI 事件派發(fā)給覆蓋元素，而不傳遞給后邊的 Canvas 組件；若不添加 AF-COMPONENT-OVERLAYER class 屬性，則會(huì)默認(rèn)派發(fā)給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>
     <!-- 假設(shè)下面的View需要蓋在 canvas 上（即 z-index 層級(jí)要比 canvas 高），那么需要在這個(gè) view 上增加class "AF-COMPONENT-OVERLAYER" 這樣-->
       <view class="top AF-COMPONENT-OVERLAYER" onTap="viewClick"  >
       </view>
   </view>

注意：如果在開發(fā)中遇到 Canvas 組件上沒有可見的 web 元素覆蓋（即：開發(fā)視角下無覆蓋元素）時(shí)也收不到 UI 事件，可以只采用步驟 1 來嘗試解決。