【微信小程序】canvas实现涂鸦板功能

<style>
.container {
  height: 100%;
  box-sizing: border-box;
} 
page{
  height: 100%
}

.container{
  width: 100%;
  height: 100%;
  position: relative
}

.canvas_area{
  width: 100%;
  height: 100%;
  background: #e0ffff
}

.myCanvas{
  width: 100%;
  height: 100%
}

.canvas_tools {
  width: 100%;
  height: 100rpx;
  position: fixed;
  left: 0;
  bottom: 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.box{
  width: 100rpx;
  height: 100rpx;
  background: rebeccapurple;
  border-radius: 50%;
}

.box1{
  width: 60rpx;
  height: 60rpx
}
.box3{
  background-color: #cc0033
}
.box4{
  background-color: #ff9900
}
.clearBtn{
  position: absolute;
  right: 0;
  top: 0;
}
</style>
<script>
Page({
  startX:0,
  startY:0,
  /**
   * 页面的初始数据
   */
  data: {
    pen:2,
    color:'#00ff00'
  },
  // 笔触粗细
  penSelect:function(e){
    this.setData({
      pen:parseInt(e.currentTarget.dataset.param)
    })
  },
  // 颜色选取
  colorSelect:function(e){
    this.setData({
      color:e.currentTarget.dataset.param
    })
  },
  clearCanvas:function(e){
    this.context.setFillStyle('#e0ffff')
    this.context.fillRect(0, 0, 375, 603)
    this.context.draw()
    this.context.draw()
    console.log('已清空画布')
  },
  // 触摸起始事件
  touchStart:function(e){
    // 获取当前坐标位置
    this.startX = e.changedTouches[0].x
    this.startY = e.changedTouches[0].y
    // console.log(this.startX, this.startY)
    // 创建绘图上下文对象
    this.context = wx.createCanvasContext(this)
    // 设置颜色
    this.context.setStrokeStyle(this.data.color)
    // 设置笔触
    this.context.setLineWidth(this.data.pen)
    // 设置笔边(圆角)
    this.context.setLineCap('round')
    // 开始绘制
    this.context.beginPath()
  },
  // 触摸的移动事件
  touchMove:function(e){
    // 获取移动后的新坐标
    var startX1 = e.changedTouches[0].x
    var startY1 = e.changedTouches[0].y
    console.log(startX1, startY1)
    // 设置画笔移动到起始点
    this.context.moveTo(this.startX,this.startY)
    // 绘制一条到x1,y1的直线
    this.context.lineTo(startX1,startY1)
    // 路径描边(只在内存上完成，未在桌面上绘制)
    this.context.stroke()
    // 重新设置坐标点
    this.startX = startX1
    this.startY = startY1
    // 绘制
    wx.drawCanvas({
      canvasId: 'myCanvas',
      reserve:true,
      actions:this.context.getActions()// 获取绘图动作数组
    })
  }
 })
</script>
<page>
	<view class='container'>
  <view class="canvas_area">
    <canvas canvas-id="myCanvas" class="myCanvas" disable-scroll="{{false}}" bindtouchstart="touchStart" bindtouchmove="touchMove">
    </canvas>
  </view>
  <button size="mini" type="warn" class="clearBtn" bindtap="clearCanvas">清空画布</button>
  <view class="canvas_tools">
    <!-- 粗笔 -->
    <view class="box box1" bindtap="penSelect" data-param="5"></view>
    <!-- 细笔 -->
    <view class="box box2" bindtap="penSelect" data-param="15"></view>
    <!-- 颜色 -->
    <view class="box box3" bindtap="colorSelect" data-param="#cc0033"></view>
    <view class="box box4" bindtap="colorSelect" data-param="#ff9900"></view>
  </view>
</view>
</page>