手写板源码

sxb.wxml

<view class="contain">
	<view>绘制你的图案</view>
	<canvas canvas-id="canvas" class="canvas"
	bindtouchstart="start" bindtouchmove="move" bindtouchend="end"></canvas>
	<text>坐 标: ({{x1}},{{y1}})</text>
</view>
<view class="menu">
	<button bindtap="clear">清除画板</button>
	<button bindtap="changecolor">画笔颜色</button>
	<view class="view2" style="{{animate}}" hidden="{{yincang}}">
		<view class="red" bindtap="red"></view>
		<view class="yellow" bindtap="yellow"></view>
		<view class="blue" bindtap="blue"></view>
		<view class="eee" bindtap="eee"></view>
		<view class="black" bindtap="black"></view>
		<view class="water" bindtap="water"></view>
		<view class="zi" bindtap="zi"></view>
	</view>
	<button bindtap="changewidth">粗细</button>
	<view class="view3" style="{{animate2}}" hidden="{{yincang2}}">
		<view class="line-width" bindtap="xi">细</view>
		<view class="line-width" bindtap="zx">中细</view>
		<view class="line-width" bindtap="pt">普通</view>
		<view class="line-width" bindtap="zc">中粗</view>
		<view class="line-width" bindtap="c">粗</view>
	</view>
</view>

sxb.wxss

@import "../../animate.wxss";
page{
  height: 100%;
  background-color: #fffbf0;
}
.contain{
  
  display: flex;
  flex-direction: column;
  align-items: center;
}
.canvas{
  background-color: white;
  border: 1px solid black;
  width: 96%;
  height: 600rpx;
  box-sizing: border-box;
  box-shadow:11rpx 11rpx 11rpx gray;
}
text{
  margin-top: 15rpx;
  font-size: 35rpx;
}
button{
  box-shadow: 11rpx 11rpx 11rpx gray;
  margin-bottom: 20rpx;
  width: 200rpx;
  line-height: 60rpx;
}
.view2{
  width: 80%;
  height: 60rpx;
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  text-align: center;
  /* animation: zoomIn 2.5s; */
}
.view2 view{
  /* border: 1rpx solid black; */
  flex: 1;
  margin-left: 30rpx;
  border-radius: 50%;
  margin-bottom: 10rpx;
}
.red{
  background-color: red;
}
.yellow{
  background-color: yellow;
}
.blue{
  background-color: #3AC2F1;
}
.eee{
  background-color: green;
}
.black{
  background-color: black;
}
.water{
  background-color: #88ada6;
}
.zi{
  background-color: #725e82;
}
.menu{
  margin-top: 20rpx;
  /* background-color: burlywood; */

}
.view3{
  display: flex;
  width: 90%;
  margin: 0 auto;

}
.line-width{
  flex: 1;
  text-align: center;
}

sxb.js

var cvs = null;
var touchs=[];
Page({
  data: {
    x1:0,
    y1:0,
    linecolor: "black",
    linewidth:3,
    animate:"",
    animate2:"",
    yincang:true,
    yincang2:true
  },
  start:function(e){
    this.setData({
      x1:Math.floor(e.touches[0].x),
      y1:Math.floor(e.touches[0].y)
    })
    let point={ x:e.touches[0].x,y:e.touches[0].y} 
    touchs.push(point)
  },
  move:function(e){
    this.setData({
      x1:Math.floor(e.touches[0].x),
      y1:Math.floor(e.touches[0].y)
    })
    console.log(touchs.length)
    let point={ x:e.touches[0].x,y:e.touches[0].y} 
    touchs.push(point)
      this.draw(touchs)
  },
  end:function(e){
  //  touchs.pop()
  touchs=[]
  },
  draw:function(touchs){
    var point1=touchs[0];
    var point2=touchs[1];
    cvs.moveTo(point1.x,point1.y);
    cvs.lineTo(point2.x,point2.y);
    cvs.stroke();
    cvs.draw(true);
    touchs.shift();
  },
  onLoad: function () {
    cvs=wx.createCanvasContext('canvas');
    // cvs.beginPath();
    cvs.setStrokeStyle(this.data.linecolor);  
    cvs.setLineWidth(this.data.linewidth);  
    cvs.setLineCap('round');  
    cvs.setLineJoin('round'); 
  },
  clear:function(){
    cvs.clearRect(0,0,750,600);
    cvs.draw(true);
    this.setData({
      x1:0,
      y1:0
    })
  },
  red:function(){
    this.setData({
      linecolor:"red",
      yincang:true
    })
    cvs.setStrokeStyle(this.data.linecolor);
  },
  yellow:function(){
    this.setData({
      linecolor:"yellow",
      yincang:true
    })
    cvs.setStrokeStyle(this.data.linecolor);
  },
  blue:function(){
    this.setData({
      linecolor:"#3AC2F1",
      yincang:true
    })
    cvs.setStrokeStyle(this.data.linecolor);
  },
  eee:function(){
    this.setData({
      linecolor:"green",
      yincang:true
    })
    cvs.setStrokeStyle(this.data.linecolor);
  },
  black:function(){
    this.setData({
      linecolor:"black",
      yincang:true
    })
    cvs.setStrokeStyle(this.data.linecolor)
  },
  water:function(){
    this.setData({
      linecolor:"#88ada6",
      yincang:true
    })
    cvs.setStrokeStyle(this.data.linecolor)
  },
  zi:function(){
    this.setData({
      linecolor:"#725e82",
      yincang:true
    })
    cvs.setStrokeStyle(this.data.linecolor)
  },
  changecolor:function(){
    this.setData({
     yincang:!this.data.yincang,
     animate: "animation:zoomIn 1s"
    })
  },
  changewidth:function(){
    this.setData({
     yincang2:!this.data.yincang2,
     animate2: "animation:zoomIn 1s"
    })
  },
  xi:function(){
    this.setData({
      linewidth:1,
      yincang2:true
    })
    cvs.setLineWidth(this.data.linewidth)
  },
  zx:function(){
    this.setData({
      linewidth:2,
      yincang2:true
    })
    cvs.setLineWidth(this.data.linewidth)
  },
  pt:function(){
    this.setData({
      linewidth:3,
      yincang2:true
    })
    cvs.setLineWidth(this.data.linewidth)
  },
  zc:function(){
    this.setData({
      linewidth:4,
      yincang2:true
    })
    cvs.setLineWidth(this.data.linewidth)
  },
  c:function(){
    this.setData({
      linewidth:5,
      yincang2:true
    })
    cvs.setLineWidth(this.data.linewidth)
  }
})