微信小程序实现的涂鸦功能示例【附源码下载】

<view class="container">
  <!--画布区域-->
  <view class="canvas_area">
    <!--注意：同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作-->
    <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="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 class="box box5" bindtap="clearcanvas"></view>
  </view>
</view>

page({
 data:{
  pen : 3, //画笔粗细默认值
  color : '#cc0033' //画笔颜色默认值
 },
 startx: 0, //保存x坐标轴变量
 starty: 0, //保存x坐标轴变量
 isclear : false, //是否启用橡皮擦标记
 //手指触摸动作开始
 touchstart: function (e) {
   //得到触摸点的坐标
   this.startx = e.changedtouches[0].x
   this.starty = e.changedtouches[0].y
   this.context = wx.createcontext()
   if(this.isclear){ //判断是否启用的橡皮擦功能 ture表示清除 false表示画画
     this.context.setstrokestyle('#f8f8f8') //设置线条样式 此处设置为画布的背景颜色 橡皮擦原理就是：利用擦过的地方被填充为画布的背景颜色一致 从而达到橡皮擦的效果 
     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.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
   if(this.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 () {
 },
 //启动橡皮擦方法
 clearcanvas: function(){
   if(this.isclear){
    this.isclear = false;
   }else{
    this.isclear = true;
   }
 },
 penselect: function(e){ //更改画笔大小的方法
  console.log(e.currenttarget);
  this.setdata({pen:parseint(e.currenttarget.dataset.param)});
  this.isclear = false;
 },
 colorselect: function(e){ //更改画笔颜色的方法
  console.log(e.currenttarget);
  this.setdata({color:e.currenttarget.dataset.param});
  this.isclear = false;
 }
})