摘要：撤銷清空等操作撤銷前進(jìn)清空清空前后數(shù)據(jù)恢復(fù)到默認(rèn)數(shù)據(jù)地址查看代碼

效果展示

getImageData() 返回ImageData對(duì)象，該對(duì)象為畫布上指定的矩形復(fù)制像素?cái)?shù)據(jù)

putImageData() 把圖像數(shù)據(jù)（從指定的 ImageData 對(duì)象）放回畫布上

clearRect() 在給定的矩形內(nèi)清除指定的像素

toDataURL() 返回canvas圖像的URL

lineTo() 添加一個(gè)新點(diǎn)，創(chuàng)建從該點(diǎn)到最后指定點(diǎn)的線條

stroke() 繪制已定義的路徑

beginPath() 起始一條路徑，或重置當(dāng)前路徑

moveTo() 把路徑移動(dòng)到畫布中的指定點(diǎn)，不創(chuàng)建線條

strokeStyle 設(shè)置或返回用于筆觸的顏色、漸變或模式

shadowBlur 設(shè)置或返回用于陰影的模糊級(jí)別

shadowColor 設(shè)置或返回用于陰影的顏色

lineWidth 設(shè)置或返回當(dāng)前的線條寬度

更多API請(qǐng)參考 canvas基本使用

基礎(chǔ)線條繪制功能

筆觸顏色修改

筆刷粗細(xì)調(diào)整

撤回、前進(jìn)、情況功能

生成圖片

colors: 筆觸顏色列表

brushs: 筆刷對(duì)應(yīng)的粗細(xì)

context: canvas context

imgUrl: 用于存放保存圖片的地址

canvasMoveUse: 是否允許執(zhí)行move時(shí)候繪制線條

preDrawAry: 存儲(chǔ)當(dāng)前表面狀態(tài)數(shù)組-上一步

nextDrawAry: 存儲(chǔ)當(dāng)前表面狀態(tài)數(shù)組-下一步

middleAry: 中間數(shù)組

lineWidth: 線條寬度

lineColor: 線條顏色

shadowBlur: 陰影

data() {
  return {
    colors: ["#fef4ac","#0018ba","#ffc200","#f32f15","#cccccc","#5ab639"],
    brushs: [{
            className: "small fa fa-paint-brush",
            lineWidth: 3
          },{
            className: "middle fa fa-paint-brush",
            lineWidth: 6
          },{
            className: "big fa fa-paint-brush",
            lineWidth: 12
          }],
    context: {},
    imgUrl: [],
    canvasMoveUse: true,
    preDrawAry: [],
    nextDrawAry: [],
    middleAry: [],
    config: {
      lineWidth: 1,
      lineColor: "#f2849e",
      shadowBlur: 2
    }
  }
}

  setCanvasStyle() {
    this.context.lineWidth = this.config.lineWidth
    this.context.shadowBlur = this.config.shadowBlur
    this.context.shadowColor = this.config.lineColor
    this.context.strokeStyle = this.config.lineColor
  }

筆觸顏色及粗細(xì)相關(guān)設(shè)置（點(diǎn)擊修改config數(shù)據(jù)）：

// 當(dāng)在屏幕中移動(dòng)時(shí)即開始繪制準(zhǔn)備
beginPath(e){
  const canvas = document.querySelector("#canvas")
  if (e.target !== canvas) {
    this.context.beginPath()
  }
}

// 在canvas中鼠標(biāo)按下
 canvasDown(e) {
  // 讓move方法可用
  this.canvasMoveUse = true
  // client是基于整個(gè)頁(yè)面的坐標(biāo)
  // offset是cavas距離頂部以及左邊的距離
  const canvasX = e.clientX - e.target.parentNode.offsetLeft
  const canvasY = e.clientY - e.target.parentNode.offsetTop
  // 設(shè)置canvas的配置
  this.setCanvasStyle()
  //清除子路徑
  this.context.beginPath()
  // 移動(dòng)的起點(diǎn)
  this.context.moveTo(canvasX, canvasY)
  //當(dāng)前繪圖表面狀態(tài)
  const preData = this.context.getImageData(0, 0, 600, 400)
  //當(dāng)前繪圖表面進(jìn)棧
  // 按下相當(dāng)于新的操作的開始，所以把當(dāng)前記錄數(shù)據(jù)放到prev中
  this.preDrawAry.push(preData)
},

// canvas中鼠標(biāo)移動(dòng)
canvasMove(e) {
  if(this.canvasMoveUse) {
    // 只有允許移動(dòng)時(shí)調(diào)用
    const t = e.target
    let canvasX
    let canvasY
    // 由于手機(jī)端和pc端獲取頁(yè)面坐標(biāo)方式不同，所以需要做出判斷
    if(this.isPc()){
      canvasX = e.clientX - t.parentNode.offsetLeft
      canvasY = e.clientY - t.parentNode.offsetTop
    }else {
      canvasX = e.changedTouches[0].clientX - t.parentNode.offsetLeft
      canvasY = e.changedTouches[0].clientY - t.parentNode.offsetTop
    }
    // 連接到移動(dòng)的位置并上色
    this.context.lineTo(canvasX, canvasY)
    this.context.stroke()
  }
},

// canvas中鼠標(biāo)放開
canvasUp(e){
  const preData = this.context.getImageData(0, 0, 600, 400)
  if (!this.nextDrawAry.length) {
    // 在沒有撤銷過的情況下，將當(dāng)前數(shù)據(jù)放入prev
    //當(dāng)前繪圖表面進(jìn)棧
    this.middleAry.push(preData)
  } else {
    // 在撤銷的情況下，將在后面步驟的數(shù)據(jù)情況記錄
    this.middleAry = []
    this.middleAry = this.middleAry.concat(this.preDrawAry)
    this.middleAry.push(preData)
    this.nextDrawAry = []
  }
  // 設(shè)置move時(shí)不可繪制
  this.canvasMoveUse = false
}

為了保證移動(dòng)端的可用性，加入touchstart等。

// 撤銷
if (this.preDrawAry.length) {
  const popData = this.preDrawAry.pop()
  const midData = this.middleAry[this.preDrawAry.length + 1]
  this.nextDrawAry.push(midData)
  this.context.putImageData(popData, 0, 0)
}

// 前進(jìn)
if (this.nextDrawAry.length) {
  const popData = this.nextDrawAry.pop()
  const midData = this.middleAry[this.middleAry.length - this.nextDrawAry.length - 2]
  this.preDrawAry.push(midData)
  this.context.putImageData(popData, 0, 0)
}

// 清空
this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height)
// 清空前后數(shù)據(jù)
this.preDrawAry = []
this.nextDrawAry = []
// middleAry恢復(fù)到默認(rèn)數(shù)據(jù)
this.middleAry = [this.middleAry[0]]

demo地址

查看代碼