從一個畫板demo學習canvas

netmou 發(fā)布于2019-08-20 16:08 / 1647人閱讀

摘要：前言初學，做了一個畫板應(yīng)用，地址點這里。本篇為的一些基礎(chǔ)思想和注意事項，不是基礎(chǔ)。主要是在于事件上的實踐經(jīng)驗屏兼容屏會使用多個物理像素渲染一個獨立像素，導(dǎo)致一倍圖在屏幕上模糊，也是這樣，所以我們應(yīng)該把畫布的大小設(shè)為元素大小的或倍。

前言

初學canvas，做了一個畫板應(yīng)用，地址點這里。本篇為canvas的一些基礎(chǔ)思想和注意事項，不是基礎(chǔ)api。主要是在于touch事件上的實踐經(jīng)驗

retina屏兼容

retina屏會使用多個物理像素渲染一個獨立像素，導(dǎo)致一倍圖在retina屏幕上模糊，canvas也是這樣，所以我們應(yīng)該把canvas畫布的大小設(shè)為canvas元素大小的2或3倍。元素大小在css中設(shè)置

const canvas = selector("#canvas")
const ctx = canvas.getContext("2d")
const RATIO = 3
const canvasOffset = canvas.getBoundingClientRect()
canvas.width = canvasOffset.width * RATIO
canvas.height = canvasOffset.height * RATIO

坐標系轉(zhuǎn)化

把相對于瀏覽器窗口的坐標轉(zhuǎn)化為canvas坐標，需要注意的是，如果兼容了retina，需要乘上devicePixelRatio。后面所有出現(xiàn)的坐標，都要通過這個函數(shù)轉(zhuǎn)化

function windowToCanvas (x, y) {
  return {
    x: (x - canvasOffset.left) * RATIO,
    y: (y - canvasOffset.top) * RATIO
  }
}

不得不提的是，《HTML5 Canvas核心技術(shù)》有一個相同的函數(shù)，但是書上那個是錯的（也有可能我看的那本是假書）

獲取touch點的坐標

function getTouchPosition (e) {
  let touch = e.changedTouches[0]
  return windowToCanvas(touch.clientX, touch.clientY)
}

畫布狀態(tài)的儲存和恢復(fù)

進行繪圖操作時，我們會頻繁設(shè)置canvas繪圖環(huán)境的屬性（線寬，顏色等），大多數(shù)情況下我們只是臨時設(shè)置，比如畫藍色的線段，又要畫一個紅色的正方形，為了不影響兩個繪圖操作，我們需要在每次繪制時，先保存環(huán)境屬性（save），繪圖完畢后恢復(fù)（restore）

ctx.save()
ctx.fillStyle = "#333"
ctx.strokeStyle = "#666"
ctx.restore()

繪制表面的儲存與恢復(fù)

主要用于臨時性的繪圖操作，比如用手指拖出一個方形時，首先要在touchstart事件里儲存拖動開始時的繪制表面（getImageData），touchmove的事件函數(shù)中，首先要先恢復(fù)touch開始時的繪圖表面（putImageData），再根據(jù)當前的坐標值畫出一個方形，繼續(xù)拖動時，剛才畫出的方形會被事件函數(shù)的恢復(fù)繪圖表面覆蓋掉，在重新繪制一個方形，所以無論怎么拖動，我們看到的只是畫了一個方形，下面是畫板demo中方形工具的類

// 工具基礎(chǔ) 寬度，顏色，是否在繪畫中，是否被選中
class Basic {
  constructor (width = RATIO, color = "#000") {
    this.width = width
    this.color = color
    this.drawing = false
    this.isSelect = false
  }
}

class Rect extends Basic {
  constructor (width = RATIO, color = "#000") {
    super(width, color)
    this.startPosition = {
      x: 0,
      y: 0
    }
    this.firstDot = ctx.getImageData(0, 0, canvasWidth, canvasHeight)
  }
  begin (loc) {
    this.firstDot = ctx.getImageData(0, 0, canvasWidth, canvasHeight) //在這里儲存繪圖表面
    saveImageData(this.firstDot)
    Object.assign(this.startPosition, loc)
    ctx.save() // 儲存畫布狀態(tài)
    ctx.lineWidth = this.width
    ctx.strokeStyle = this.color
  }
  draw (loc) {
    ctx.putImageData(this.firstDot, 0, 0) //恢復(fù)繪圖表面，并開始繪制方形
    const rect = {
      x: this.startPosition.x <= loc.x ? this.startPosition.x : loc.x,
      y: this.startPosition.y <= loc.y ? this.startPosition.y : loc.y,
      width: Math.abs(this.startPosition.x - loc.x),
      height: Math.abs(this.startPosition.y - loc.y)
    }
    ctx.beginPath()
    ctx.rect(rect.x, rect.y, rect.width, rect.height)
    ctx.stroke()
  }
  end (loc) {
    ctx.putImageData(this.firstDot, 0, 0)
    const rect = {
      x: this.startPosition.x <= loc.x ? this.startPosition.x : loc.x,
      y: this.startPosition.y <= loc.y ? this.startPosition.y : loc.y,
      width: Math.abs(this.startPosition.x - loc.x),
      height: Math.abs(this.startPosition.y - loc.y)
    }
    ctx.beginPath()
    ctx.rect(rect.x, rect.y, rect.width, rect.height)
    ctx.stroke()
    ctx.restore() //恢復(fù)畫布狀態(tài)
  }
  bindEvent () {
    canvas.addEventListener("touchstart", (e) => {
      e.preventDefault()
      if (!this.isSelect) {
        return false
      }
      this.drawing = true
      let loc = getTouchPosition(e)
      this.begin(loc)
    })
    canvas.addEventListener("touchmove", (e) => {
      e.preventDefault()
      if (!this.isSelect) {
        return false
      }
      if (this.drawing) {
        let loc = getTouchPosition(e)
        this.draw(loc)
      }
    })
    canvas.addEventListener("touchend", (e) => {
      e.preventDefault()
      if (!this.isSelect) {
        return false
      }
      let loc = getTouchPosition(e)
      this.end(loc)
      this.drawing = false
    })
  }
}

橢圓的繪制方法（均勻壓縮法）

原理是在壓縮過的坐標系中繪制一個圓形，那看起來就是一個橢圓了。因為是通過拖動繪制橢圓，所以在我們拖動時，必然拖出了一個方形，那其實就是以方形的中心為圓心，較長邊的一半為半徑畫圓，這個圓要畫在壓縮過的坐標系中，壓縮比例就是較窄邊與較長邊的比，圓心的坐標也要根據(jù)壓縮比例做坐標變換，圓形工具類代碼如下

class Round extends Basic{
  constructor (width = RATIO, color = "#000") {
    super(width, color)
    this.startPosition = {
      x: 0,
      y: 0
    }
    this.firstDot = ctx.getImageData(0, 0, canvasWidth, canvasHeight)
  }
  drawCalculate (loc) {
    ctx.save()
    ctx.lineWidth = this.width
    ctx.strokeStyle = this.color
    ctx.putImageData(this.firstDot, 0, 0) //恢復(fù)繪圖表面
    const rect = {
      width: loc.x - this.startPosition.x,
      height: loc.y - this.startPosition.y
    } // 計算方形的寬高（帶有正負值）
    const rMax = Math.max(Math.abs(rect.width), Math.abs(rect.height)) // 選出較長邊
    rect.x = this.startPosition.x + rect.width / 2 // 計算壓縮前的圓心坐標
    rect.y = this.startPosition.y + rect.height / 2
    rect.scale = {
      x: Math.abs(rect.width) / rMax,
      y: Math.abs(rect.height) / rMax
    } // 計算壓縮比例
    ctx.scale(rect.scale.x, rect.scale.y)
    ctx.beginPath()
    ctx.arc(rect.x / rect.scale.x, rect.y / rect.scale.y, rMax / 2, 0, Math.PI * 2) 
    ctx.stroke()
    ctx.restore()
  }
  begin (loc) {
    this.firstDot = ctx.getImageData(0, 0, canvasWidth, canvasHeight) //儲存繪圖表面
    saveImageData(this.firstDot)
    Object.assign(this.startPosition, loc)
  }
  draw (loc) {
    this.drawCalculate(loc)
  }
  end (loc) {
    this.drawCalculate(loc)
  }
  bindEvent () {
    canvas.addEventListener("touchstart", (e) => {
      e.preventDefault()
      if (!this.isSelect) {
        return false
      }
      this.drawing = true
      let loc = getTouchPosition(e)
      this.begin(loc)
    })
    canvas.addEventListener("touchmove", (e) => {
      e.preventDefault()
      if (!this.isSelect) {
        return false
      }
      if (this.drawing) {
        let loc = getTouchPosition(e)
        this.draw(loc)
      }
    })
    canvas.addEventListener("touchend", (e) => {
      e.preventDefault()
      if (!this.isSelect) {
        return false
      }
      let loc = getTouchPosition(e)
      this.end(loc)
      this.drawing = false
    })
  }
}

撤銷操作

上述例子中都有個 saveImageData() 函數(shù)，這個函數(shù)是把當前繪圖表面儲存在一個數(shù)組中，點擊撤銷的時候用于恢復(fù)上一步的繪圖表面

const lastImageData = []
function saveImageData (data) {
  (lastImageData.length == 5) && (lastImageData.shift()) // 上限為儲存5步，太多了怕掛掉
  lastImageData.push(data)
}
document.getElementById("cancel").addEventListener("click", () => {
  if(lastImageData.length < 1) return false
  ctx.putImageData(lastImageData[lastImageData.length - 1], 0, 0)
  lastImageData.pop()
})

總結(jié)

有一些看上去高大上的東西，了解了以后就會發(fā)現(xiàn)很簡單，有了基礎(chǔ)的模型以后，再去一點一點豐富功能，所以有些時候不能總是看看看，一定要動手，yeah
我的博客即將搬運同步至騰訊云+社區(qū)，邀請大家一同入駐：https://cloud.tencent.com/dev...

云服務(wù)器 GPU云服務(wù)器給小弟一個demo學習吧 js從最后一個輸出從云服務(wù)器發(fā)布一個網(wǎng)站深度學習從哪里入手

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/82736.html

發(fā)表評論

登陸后可評論

0條評論

netmou

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow2.0

閱讀 1863·2023-04-25 14:33
《BREW進階與精通——3G移動增值業(yè)務(wù)運營、定制與開發(fā)》一

閱讀 3456·2021-11-22 15:22
Pandas技巧大全：含具體代碼實現(xiàn)

閱讀 2253·2021-09-30 09:48
RackNerd：$18.18/年KVM-1GB/24G NVMe/2.5TB/多機房可選

閱讀 2805·2021-09-14 18:01
CSS 盒模型簡介

閱讀 1794·2019-08-30 15:55
響應(yīng)式開發(fā)精短總結(jié)

閱讀 3066·2019-08-30 15:53
前端不得不說的數(shù)據(jù)結(jié)構(gòu)

閱讀 2214·2019-08-30 15:44
CSS 關(guān)于多級菜單的內(nèi)邊距的處理方式

閱讀 718·2019-08-30 10:58

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

從一個畫板demo學習canvas

相關(guān)文章

canvas進階——如何畫出平滑的曲線?

canvas進階——如何畫出平滑的曲線?

Canvas畫板---手機上也可以用的畫板

發(fā)表評論

0條評論

netmou

男|高級講師

TA的文章

tensorflow2.0

《BREW進階與精通——3G移動增值業(yè)務(wù)運營、定制與開發(fā)》一

Pandas技巧大全：含具體代碼實現(xiàn)

RackNerd：$18.18/年KVM-1GB/24G NVMe/2.5TB/多機房可選

CSS 盒模型簡介

響應(yīng)式開發(fā)精短總結(jié)

前端不得不說的數(shù)據(jù)結(jié)構(gòu)

CSS 關(guān)于多級菜單的內(nèi)邊距的處理方式

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

從一個畫板demo學習canvas

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！