本篇文章為大家展示了怎么在微信小程序中實現(xiàn)手指觸摸畫板，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供泌陽網(wǎng)站建設(shè)、泌陽做網(wǎng)站、泌陽網(wǎng)站設(shè)計、泌陽網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、泌陽企業(yè)網(wǎng)站模板建站服務(wù)，十載泌陽做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

wxml

<!--pages/shouxieban/shouxieban.wxml-->
<view class="container">
 <view>手寫板（請在下方區(qū)域手寫內(nèi)容）</view>
 <canvas  class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas>
 <view class='btns canvaspd'>
 <button bindtap="cleardraw">清除畫板</button>
 <button bindtap="setSign">確定</button>
 </view>
 <image src='{{canvasimgsrc}}'></image> 
</view>

js

var context = null;// 使用 wx.createContext 獲取繪圖上下文 context
var isButtonDown = false;//是否在繪制中
var arrx = [];//動作橫坐標
var arry = [];//動作縱坐標
var arrz = [];//總做狀態(tài)，標識按下到抬起的一個組合
var canvasw = 0;//畫布寬度
var canvash = 0;//畫布高度
// pages/shouxieban/shouxieban.js
Page({
 /**
 * 頁面的初始數(shù)據(jù)
 */
 data: {
 //canvas寬高
 canvasw: 0,
 canvash: 0,
 //canvas生成的圖片路徑
 canvasimgsrc: ""
 },
 //畫布初始化執(zhí)行
 startCanvas: function () {
 var that = this;
 //創(chuàng)建canvas
 this.initCanvas();
 //獲取系統(tǒng)信息
 wx.getSystemInfo({
  success: function (res) {
  canvasw = res.windowWidth - 0;//設(shè)備寬度
  canvash = canvasw;
  that.setData({ 'canvasw': canvasw });
  that.setData({ 'canvash': canvash });
  }
 });
 
 },
 //初始化函數(shù)
 initCanvas: function () {
 // 使用 wx.createContext 獲取繪圖上下文 context
 context = wx.createCanvasContext('canvas');
 context.beginPath()
 context.setStrokeStyle('#000000');
 context.setLineWidth(4);
 context.setLineCap('round');
 context.setLineJoin('round');
 },
 //事件監(jiān)聽
 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);
 
 },
 canvasMove: function (event) {
 if (isButtonDown) {
  arrz.push(1);
  arrx.push(event.changedTouches[0].x);
  arry.push(event.changedTouches[0].y);
 
 };
 
 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(false);
 },
 canvasEnd: function (event) {
 isButtonDown = false;
 },
 //清除畫布
 cleardraw: function () {
 //清除畫布
 arrx = [];
 arry = [];
 arrz = [];
 context.clearRect(0, 0, canvasw, canvash);
 context.draw(true);
 },
 //提交簽名內(nèi)容
 setSign: function () {
 var that = this;
 if (arrx.length == 0) {
  wx.showModal({
  title: '提示',
  content: '簽名內(nèi)容不能為空！',
  showCancel: false
  });
  return false;
 };
 console.log("不是空的，canvas即將生成圖片")
 //生成圖片
 wx.canvasToTempFilePath({
  canvasId: 'canvas',
  success: function (res) {
  console.log("canvas可以生成圖片")
  console.log(res.tempFilePath, 'canvas圖片地址');
  that.setData({ canvasimgsrc: res.tempFilePath })
  //code 比如上傳操作
 
  },
  fail: function () {
  console.log("canvas不可以生成圖片")
  wx.showModal({
   title: '提示',
   content: '微信當(dāng)前版本不支持，請更新到最新版本！',
   showCancel: false
  });
  },
  complete: function () {
 
  }
 })
 
 },
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
 */
 onLoad: function (options) {
 //畫布初始化執(zhí)行
 this.startCanvas();
 
 }
})

css

/* pages/shouxieban/shouxieban.wxss */
/*手寫板 */
page{
 background: #f6f6f6;
 padding: 5px auto
}
canvas{
 border: 1px solid #d0d0d0;
 margin: 5rpx;
 background: #f2f2f2
}

上述內(nèi)容就是怎么在微信小程序中實現(xiàn)手指觸摸畫板，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享文章：怎么在微信小程序中實現(xiàn)手指觸摸畫板
鏈接分享：http://chinadenli.net/article36/gohgpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、域名注冊、小程序開發(fā)、全網(wǎng)營銷推廣、網(wǎng)站制作、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)