小程序-涂鸦画笔(案例-集福)

不同的项目总是要求不同的需求   在下面的代码中，我自码了画福的canvas代码，及橡皮檫的代码；

下面的图中也需实现背景图的点击切换取，点击画图完毕按钮，就实现了内容的提交

wxml:

<canvas  canvas-id="myCanvas"  class="myCanvas" style="width:{{Cwidth1}}px;height:{{Cheight1}}px;top:{{Ctop1}}px;left:{{Cleft1}}px

      disable-scroll="false"

      bindtouchstart="touchStart"

      bindtouchmove="touchMove"

      bindtouchend="touchEnd">

</canvas>

 <view class="box box5" bindtap="clearCanvas"></view>     //橡皮檫按钮

js:

var canvasC ;   //声明一个全局变量，用于橡皮檫

Page({

onLoad: function () {

      var that = this;

     wx.getSystemInfo({

            success: function (res) {

                W = res.windowWidth;

                H = res.windowHeight;

                that.setData({

                    Cwidth: W,

                    Cheight: H / 1.7,

                    Cwidth1: W,

                    Cheight1: H / 1.7,

                    Ctop1: 0,

                    Cleft1: 0

                })

             },

     })

},

 startX : 0;   //保存X坐标轴变量

 startY : 0;   //保存Y坐标轴变量 

//手指触摸动作开始

touchStart:function(e){

      //得到触摸点的坐标

    this.startX = e.changedTouches[0].x

    this.startY = e.changedTouches[0].y

    this.context = wx.createCanvasContext("myCanvas")

    canvasC = this.context;    //将画布保存进全局变量

    新添2018-3-6

    this.context.setStrokeStyle("#ff0000")    //设置笔触颜色

    this.context.setLineWidth(10)    //设置笔触粗细

    this.context.setLineCap("round")   //设置笔触线条圆润

    this.context.beginPath()

}

//手指触摸后移动

touchMove:function(e){

      var startX1 = e.changedTouches[0].x

      var startY1 = e.changedTouches[0].y

     this.context.moveTo(this.startX,this.startY)

      this.context.lineTo(startX1,startY1)

      this.context.stroke()

      this.startX = startX1;

      this.startY = startY1;

      wx.drawCanvas({

            canvasId:"myCanvas",

            reserve:true,

            actions:this.context.getActions()   //获取绘图动作数组

      })

}，

// 点击橡皮檫全部清除

clearCanvas:function(){

      canvasC.clearRect(0,0,w,H/1.7);

      canvasC.draw()

}

 })