微信小程序（学习五） -- 使用canvas实现涂鸦效果

自己实现了一个涂鸦效果，需要的可以看看，代码可以直接使用就不给下载地址了。

<!--pages/draw.wxml-->
<view class="container">
    <view class="canvas_area">
        <canvas canvas-id="myCanvas" 
          class="myCanvas"
          disable-scroll="false"
          bindtouchstart="touchStart"
          bindtouchmove="touchMove"
          bindtouchend="touchEnd">
        </canvas>
    </view>
    <!--画布工具区域-->
    <view class="canvas_tools">
        <view class="box_box1" bindtap="penSelect" data-param="6">
          <view class='circle'></view>
        </view>
        <view class="box_box2" bindtap="penSelect" data-param="20">
          <view class='circle'></view>
        </view>
        <view class="box_box3" bindtap="colorSelect" data-param="#fe0000"></view>
        <view class="box_box4" bindtap="colorSelect" data-param="#ff9900"></view>
        <view class="box_box5" bindtap="clearCanvas">
          <image src='/images/eraser.png'></image>
        </view>
    </view>
</view>

/* pages/draw.wxss */

page{
  height: 100%;
} 

.container {
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d6cfcf), color-stop(1, #c9c0c0));
}

.canvas_area {
  height: 1000rpx;
  width: 100%;
  margin-top: 10rpx;
  background-color: #d6cfcf;
} 

.canvas_area .myCanvas {
  height: 1000rpx;
  width: 100%;
  background-color: white;
}

.canvas_tools {
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  background: #c9c0c0;
  display: flex;
  justify-content: space-between;
  padding: 0;
}

.canvas_tools .box_box1 {
  height: 100rpx;
  width: 100rpx;
  border-radius: 50rpx;
  margin-top: 25rpx;
  margin-left: 25rpx;
  background-color: #46768c;
  padding: 0;
}

.canvas_tools .box_box1 .circle {
  height: 6rpx;
  width: 6rpx;
  border-radius: 3rpx;
  margin-top: 47rpx;
  margin-left: 47rpx;
  background-color: #00fd59;
}

.canvas_tools .box_box2 {
  height: 100rpx;
  width: 100rpx;
  border-radius: 50rpx;
  margin-top: 25rpx;
  margin-left: 25rpx;
  background-color: #2d50b2;
  padding: 0;
}

.canvas_tools .box_box2 .circle {
  height: 20rpx;
  width: 20rpx;
  border-radius: 10rpx;
  margin-top: 40rpx;
  margin-left: 40rpx;
  background-color: #00fd59;
}

.canvas_tools .box_box3 {
  height: 100rpx;
  width: 100rpx;
  border-radius: 50rpx;
  margin-top: 25rpx;
  margin-left: 25rpx;
  background-color: #fe0000;
  padding: 0;
}

.canvas_tools .box_box4 {
  height: 100rpx;
  width: 100rpx;
  border-radius: 50rpx;
  margin-top: 25rpx;
  margin-left: 25rpx;
  background-color: #fea700;
  padding: 0;
}

.canvas_tools .box_box5 {
  height: 100rpx;
  width: 100rpx;
  border-radius: 50rpx;
  margin-top: 25rpx;
  margin-left: 25rpx;
  background-color: #afa99c;
  padding: 0;
}

.canvas_tools .box_box5 image {
  height: 60rpx;
  width: 60rpx;
  margin-top: 20rpx;
  margin-left: 20rpx;
}

// pages/draw.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isClear: false,
    penColor: 'red',
    lineWidth: 5,
  },

  /**
   * 触摸开始
   */
  touchStart: function (e) {
    //得到触摸点的坐标
    this.startX = e.changedTouches[0].x
    this.startY = e.changedTouches[0].y
    this.context = wx.createCanvasContext("myCanvas", this)

    if (this.data.isClear) { //判断是否启用的橡皮擦功能  ture表示清除  false表示画画
      this.context.setStrokeStyle('#ffffff') //设置线条样式 此处设置为画布的背景颜色  橡皮擦原理就是：利用擦过的地方被填充为画布的背景颜色一致 从而达到橡皮擦的效果
      this.context.setLineCap('round') //设置线条端点的样式
      this.context.setLineJoin('round') //设置两线相交处的样式
      this.context.setLineWidth(20) //设置线条宽度
      this.context.save();  //保存当前坐标轴的缩放、旋转、平移信息
      this.context.beginPath() //开始一个路径
      this.context.arc(this.startX, this.startY, 5, 0, 2 * Math.PI, true);  //添加一个弧形路径到当前路径，顺时针绘制  这里总共画了360度  也就是一个圆形
      this.context.fill();  //对当前路径进行填充
      this.context.restore();  //恢复之前保存过的坐标轴的缩放、旋转、平移信息
    } else {
      // 设置画笔颜色
      this.context.setStrokeStyle(this.data.penColor);
      // 设置线条宽度
      this.context.setLineWidth(this.data.lineWidth);
      this.context.setLineCap('round') // 让线条圆润
      this.context.beginPath()
    }
  },

  /**
   * 手指触摸后移动
   */
  touchMove: function (e) {

    var startX1 = e.changedTouches[0].x
    var startY1 = e.changedTouches[0].y

    if (this.data.isClear) { //判断是否启用的橡皮擦功能  ture表示清除  false表示画画
      this.context.save();  //保存当前坐标轴的缩放、旋转、平移信息
      this.context.moveTo(this.startX, this.startY);  //把路径移动到画布中的指定点，但不创建线条
      this.context.lineTo(startX1, startY1);  //添加一个新点，然后在画布中创建从该点到最后指定点的线条
      this.context.stroke();  //对当前路径进行描边
      this.context.restore()  //恢复之前保存过的坐标轴的缩放、旋转、平移信息

      this.startX = startX1;
      this.startY = startY1;

    } else {
      this.context.moveTo(this.startX, this.startY)
      this.context.lineTo(startX1, startY1)
      this.context.stroke()

      this.startX = startX1;
      this.startY = startY1;

    }

    //只是一个记录方法调用的容器，用于生成记录绘制行为的actions数组。context跟<canvas/>不存在对应关系，一个context生成画布的绘制动作数组可以应用于多个<canvas/>
    wx.drawCanvas({
      canvasId: 'myCanvas',
      reserve: true,
      actions: this.context.getActions() // 获取绘图动作数组
    })
  },

  /**
   * 触摸结束
   */
  touchEnd: function (e) {
    this.touchMove(e);
  },

  /**
   * 画笔选择
   */
  penSelect: function (options) {
    var lineWidth = options.target.dataset.param;
    console.log("lineWidth:" + lineWidth);
    this.setData ({
      isClear: false,
      lineWidth: lineWidth,
    });
  },

  /**
   * 颜色选择
   */
  colorSelect: function (options) {
    var penColor = options.target.dataset.param;
    console.log("penColor:" + penColor);
    this.setData({
      isClear: false,
      penColor: penColor,
    });
  },

  /**
   * 清除涂鸦信息
   */
  clearCanvas: function (options) {
    console.log("clearCanvas");
    this.setData({
      isClear: true
    });
  }
})