2023年微信小程序API coordinates（Canvas 坐標(biāo)系）

Canvas是微信小程序API中的一個(gè)功能強(qiáng)大的繪圖接口，可以在二維網(wǎng)格中進(jìn)行繪制。

1. Canvas 坐標(biāo)系

Canvas坐標(biāo)系左上角的坐標(biāo)為(0, 0)，這意味著你可以使用該點(diǎn)作為起點(diǎn)，在畫布上繪制你所需要的圖形。例如，使用函數(shù)fillRect(0, 0, 150, 75)可以從左上角(0, 0)開始，在畫布上繪制一個(gè)尺寸為150x75像素的矩形。

2. 坐標(biāo)系例子

為了更好地理解Canvas坐標(biāo)系，我們可以在<canvas/>中添加一些事件來觀測(cè)其坐標(biāo)系。下面的代碼演示了如何捕獲手指在Canvas上的觸摸事件，并在下方生成相應(yīng)的坐標(biāo)。

  <canvas canvas-id="myCanvas"
    style="margin: 5px; border:1px solid #d3d3d3;"
    bindtouchstart="start"
    bindtouchmove="move"
    bindtouchend="end"/>

  <view hidden="{{hidden}}">
    Coordinates: ({{x}}, {{y}})
  </view>

  Page({
    data: {
      x: 0,
      y: 0,
      hidden: true
    },
    start: function(e) {
      this.setData({
        hidden: false,
        x: e.touches[0].x,
        y: e.touches[0].y
      })
    },
    move: function(e) {
      this.setData({
        x: e.touches[0].x,
        y: e.touches[0].y
      })
    },
    end: function(e) {
      this.setData({
        hidden: true
      })
    }
  })

當(dāng)你在Canvas上移動(dòng)手指時(shí)，在下方將顯示觸摸點(diǎn)的坐標(biāo)。這將幫助你更好地理解Canvas坐標(biāo)系。

在小程序中使用Canvas進(jìn)行繪圖可以實(shí)現(xiàn)豐富多彩的功能，而了解Canvas坐標(biāo)系將有助于你在Canvas上精準(zhǔn)地繪制出所需的形狀。

<本文由himall原創(chuàng)，商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)標(biāo)明：himall原創(chuàng)>