微信小程序 Canvas 学习 Ⅰ

intro
画布首先要有基本的画布组件：
WXML 中创建下面的组件

<canvas canvas-id="myCanvas" style="border: 1px solid;"/>
​

js 中开始作画，如：

const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()
​

fillRect(a, b, c, d)其中 a、b 代表 x，y 坐标的位置，c、d 表示长宽

坐标系例子：

<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) {
	console.log（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
    })
  }
})
​

在 start 中打印出 e,如下结果

可以发现坐标存在 touches 中，而绑定的数据仍然可以从 target 的 dataset 中获取