init

app.js

@@ -0,0 +1,5 @@
+App({
+  onLaunch: function () {
+
+  }
+})

app.json

@@ -0,0 +1,12 @@
+{
+  "pages": [
+    "index/index"
+  ],
+  "window": {
+    "backgroundTextStyle": "light",
+    "navigationBarBackgroundColor": "#fff",
+    "navigationBarTitleText": "WeChat",
+    "navigationBarTextStyle": "black"
+  },
+  "sitemapLocation": "sitemap.json"
+}

index/drawCanvas.js

@@ -0,0 +1,94 @@
+class DrawCanvas {
+  constructor() {
+    this._ctx = null
+    this._canvas = null
+    this._executionArr = []
+    this._pathArr = []
+    this._style = null
+  }
+
+  _init({ width, height, canvas, baseMapUrl = '' }) {
+    if (!width || !height || !canvas) return
+    const ctx = canvas.getContext('2d')
+    const dpr = wx.getSystemInfoSync().pixelRatio
+    canvas.width = width * dpr
+    canvas.height = height * dpr
+    ctx.scale(dpr, dpr)
+    // 添加底图
+    if (baseMapUrl) {
+      const img = canvas.createImage()
+      img.onload = () => {
+        this._ctx.drawImage(img, 0, 0, width, height)
+        this._ctx.globalCompositeOperation = "source-atop" //画笔重叠部分覆盖
+      }
+      img.src = baseMapUrl
+    }
+    this._canvas = canvas
+    this._ctx = ctx
+    this._executionArr = [] //每移动一笔的数据
+    this._pathArr = [] //抬起落下为一笔
+
+  }
+
+  mouseStart() {
+    this._executionArr = []
+  }
+
+  mouseMove({ x = 0, y = 0 }) {
+    if (!this._style) return
+    this._executionArr.push([x, y])
+    this._ctx.fillStyle = this._style
+    this._ctx.fillRect(x - 5, y - 5, 10, 10)
+    console.log('画图并存储');
+  }
+
+  mouseEnd() {
+    this._pathArr.push({
+      fillStyle: this._style,
+      path: this._executionArr
+    })
+  }
+
+  mouseBack() {
+    // 删除每个移动数据
+    if (this._pathArr.length) {
+      const item = this._pathArr.length <= 1 ? this._pathArr[0] : this._pathArr[this._pathArr.length - 1]
+      for (let k = 0; k < item.path.length; k++) {
+        const el = item.path[k];
+        this._ctx.clearRect(el[0] - 5, el[1] - 5, 11, 11)
+      }
+      this._pathArr.pop()
+    }
+  }
+
+  // 切换画笔
+  changeBrush(url = '') {
+    if (!url) return
+    const img = this._canvas.createImage()
+    img.onload = () => {
+      this._style = this._ctx.createPattern(img, 'repeat')
+    }
+    img.src = url
+  }
+
+  // 清除画布
+  destory() {
+    this._ctx.clearRect(0, 0, this._ctx.canvas.width, this._ctx.canvas.height)
+    this._pathArr = []
+    this._executionArr = []
+    this._style = null
+  }
+
+  // 保存
+  save() {
+    wx.canvasToTempFilePath({
+      canvas: this._canvas,
+      success(res) {
+        console.log('保存', res.tempFilePath);
+      }
+    })
+  }
+
+}
+
+export { DrawCanvas }

index/index.js

@@ -0,0 +1,69 @@
+const { DrawCanvas } = require('./drawCanvas')
+
+Page({
+  data: {
+    list: [
+      {
+        name: '1',
+        url: './1.png'
+      },
+      {
+        name: '2',
+        url: './2.png'
+      },
+    ],
+    dicPath: {
+      1: ''
+    }
+  },
+  drawCanvas: new DrawCanvas(),
+  onLoad() {
+    console.log(111,this.drawCanvas);
+    // 通过 SelectorQuery 获取 Canvas 节点
+    wx.createSelectorQuery()
+      .select('#canvas')
+      .fields({
+        node: true,
+        size: true
+      })
+      .exec(this.init.bind(this))
+  },
+
+  init(res) {
+    const width = res[0].width
+    const height = res[0].height
+    const canvas = res[0].node
+    this.drawCanvas._init({ width, height, canvas, baseMapUrl:'./5.png'})
+  },
+
+  start() {
+    this.drawCanvas.mouseStart()
+  },
+
+  move(e) {
+    const { x, y } = e.touches[0]
+    this.drawCanvas.mouseMove({ x, y })
+  },
+
+  end() {
+    this.drawCanvas.mouseEnd()
+  },
+
+  back() {
+    this.drawCanvas.mouseBack()
+  },
+
+  clear() {
+    this.drawCanvas.destory()
+  },
+
+  changeTool(e) {
+    const { url } = e.target.dataset.item
+    if (!url) return
+    this.drawCanvas.changeBrush(url)
+  },
+
+  save() {
+    this.drawCanvas.save()
+  }
+})

index/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

index/index.wxml

@@ -0,0 +1,12 @@
+<canvas type="2d" id="canvas" disable-scroll bindtouchmove="move" bindtouchend="end"  bindtouchstart="start" style="width: 100vw;height: 600rpx;"></canvas>
+
+<view class="tool">
+  <block wx:for="{{list}}" wx:key="item">
+    <image src="{{item.url}}" mode="aspectFit" data-item="{{item}}" bind:tap="changeTool" />
+  </block>
+</view>
+<view>
+  <button bind:tap="back">撤销</button>
+  <button bind:tap="clear">清空</button>
+  <button bind:tap="save">保存</button>
+</view>

index/index.wxss

@@ -0,0 +1,14 @@
+/* canvas{
+  background: grey;
+} */
+.tool {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.tool>image {
+  width: 100rpx;
+  height: 100rpx;
+  margin: 0 10rpx;
+}

project.config.json

@@ -0,0 +1,32 @@
+{
+  "description": "Project configuration file",
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "setting": {
+    "urlCheck": true,
+    "es6": true,
+    "postcss": true,
+    "minified": true,
+    "newFeature": true,
+    "autoAudits": false,
+    "coverView": true,
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    }
+  },
+  "compileType": "miniprogram",
+  "libVersion": "3.3.1",
+  "appid": "wx00055f4bb5d0c2c6",
+  "projectname": "canvas-demo",
+  "simulatorType": "wechat",
+  "simulatorPluginLibVersion": {},
+  "condition": {},
+  "editorSetting": {
+    "tabIndent": "insertSpaces",
+    "tabSize": 2
+  }
+}

project.private.config.json

@@ -0,0 +1,7 @@
+{
+  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+  "projectname": "canvas-demo",
+  "setting": {
+    "compileHotReLoad": true
+  }
+}

sitemap.json

@@ -0,0 +1,7 @@
+{
+  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
+  "rules": [{
+  "action": "allow",
+  "page": "*"
+  }]
+}