微信小程序—canvans画一个写字板

小程序实现canvans写字板

效果图
**

**

<canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas>
<button type="default" bindtap="cleardraw">清除画布</button>
<button type="default" bindtap="getimg">保存图片</button>

pages/write/write.js

// pages/write/write.js
// canvas 全局配置
var context = null;// 使用 wx.createContext 获取绘图上下文 context
var isButtonDown = false;
var arrx = [];
var arry = [];
var arrz = [];
var canvasw = 0;
var canvash = 0;
//获取系统信息
wx.getSystemInfo({
  success: function (res) {
    canvasw = res.windowWidth*8/10;//设备宽度
    canvash = res.windowWidth*8/10;
  }
});
//注册页面
Page({
  /**
   * 页面的初始数据
   */
  data: {
    src: "",
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.drawLine();
  }, 
  canvasIdErrorCallback: function (e) {
    console.error(e.detail.errMsg)
  },
  canvasStart: function (event){
    isButtonDown = true;
    arrz.push(0);
    arrx.push(event.changedTouches[0].x);
    arry.push(event.changedTouches[0].y);
    //context.moveTo(event.changedTouches[0].x, event.changedTouches[0].y);
   
  },
  canvasMove: function (event) {
    if (isButtonDown) {
      arrz.push(1);
      arrx.push(event.changedTouches[0].x);
      arry.push(event.changedTouches[0].y);
      // context.lineTo(event.changedTouches[0].x, event.changedTouches[0].y);
      // context.stroke();
      // context.draw()
 
    }; 
    
    for (var i = 0; i < arrx.length; i++) {
      if (arrz[i] == 0) {
        context.moveTo(arrx[i], arry[i])
      } else {
        context.lineTo(arrx[i], arry[i])
      };
 
    };
    // context.clearRect(0, 0, canvasw, canvash);
 
    context.setStrokeStyle('#000000');
    context.setLineWidth(4);
    context.setLineCap('round');
    context.setLineJoin('round');
    context.stroke();
    
    context.draw(true);
  },
  canvasEnd: function (event) {
    isButtonDown = false; 
  },
  cleardraw: function () {
    //清除画布
    arrx = [];
    arry = [];
    arrz = [];
    context.clearRect(0, 0, canvasw, canvash);
    context.draw(true);
    this.drawLine();
  },
  getimg: function(){
    if (arrx.length==0){
      wx.showModal({
        title: '提示',
        content: '签名内容不能为空！',
        showCancel: false
      });
      return false;
    };
    //生成图片
    this.saveablum();
 
  },
  saveablum:function(){
      let imageWidth = this.data.imageWidth,
      imageHeight = this.data.imageHeight;
      //获取系统信息
      wx.getSystemInfo({
        success: function (res) {
          imageWidth = res.windowWidth*9/10;//设备宽度
          imageHeight = res.windowWidth;
        }
      });
      wx.canvasToTempFilePath({     //将canvas生成图片
        canvasId: 'canvas',
        x: 0,
        y: 0,
        width: imageWidth,
        height: imageHeight,
        destWidth: imageWidth,     //截取canvas的宽度
        destHeight: imageHeight,   //截取canvas的高度
        success: function (res) {
            wx.saveImageToPhotosAlbum({  //保存图片到相册
              filePath: res.tempFilePath,
              success: function () {
                wx.showToast({
                  title: "生成图片成功！",
                  duration: 2000
                })
              },
              fail: function () {
                
              },
            })
        },
        fail:function(res){
            console.log(res);
        }
      })
  },
  // 画布
  drawLine:function(){
    // 使用 wx.createContext 获取绘图上下文 context
    context = wx.createCanvasContext('canvas');
    //外边框
    context.setStrokeStyle("#ff0000");
    context.setLineWidth(5);
    context.beginPath();
    context.rect(0, 0, canvasw, canvash);
    context.stroke();
    //使线段连续，圆滑
    context.setLineCap('round');
    context.setLineJoin('round');
    context.setLineWidth(2);
    this.drawDashedLine(context,0,0,canvasw,canvash);
    this.drawDashedLine(context,0,canvasw,canvash,0);
    this.drawfullLine(context,0,canvasw/2,canvash,canvash/2);
    this.drawfullLine(context,canvasw/2,0,canvash/2,canvash);
    // context.beginPath() 
    context.setStrokeStyle('#000000');
    context.setLineWidth(4);
    
    
    context.draw();
  },
  //画虚线（参照网上）
 drawDashedLine:function(context, x1, y1, x2, y2, dashLength) {
    dashLength = dashLength === undefined ? 10 : dashLength;
    var deltaX = x2 - x1;
    var deltaY = y2 - y1;
    var numDashes = Math.floor(
    Math.sqrt(deltaX * deltaX + deltaY * deltaY) / dashLength);
    for (var i=0; i < numDashes; ++i) {
    context[ i % 2 === 0 ? 'moveTo' : 'lineTo' ]    (x1 + (deltaX / numDashes) * i, y1 + (deltaY / numDashes) * i);
    }
    context.stroke();
},
//画直线
drawfullLine:function(context,x1,y1,x2,y2){
  context.moveTo(x1,y1);
  context.lineTo(x2,y2);
  context.stroke();
}

})  

/ pages/write/write.wxss /

#canvas{
  width:80vw;
  height:80vw;
  margin: 10px 10vw;
}
button{
  margin-bottom: 15px;
}