這篇文章將為大家詳細(xì)講解有關(guān)HTML5 canvas如何實(shí)現(xiàn)畫圖程序，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元蘄春做網(wǎng)站,已為上家服務(wù),為蘄春各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

項(xiàng)目簡介

整個(gè)項(xiàng)目分為兩大部分

1. 場景
   場景負(fù)責(zé)canvas控制，事件監(jiān)聽，動(dòng)畫處理

2. 精靈
   精靈則指的是每一種可以繪制的canvas元素

Demo演示地址

項(xiàng)目特點(diǎn)

可擴(kuò)展性強(qiáng)

sprite精靈實(shí)現(xiàn)

父類

class Element {
  constructor(options = {
    fillStyle: 'rgba(0,0,0,0)',
    lineWidth: 1,
    strokeStyle: 'rgba(0,0,0,255)'
  }) {
    this.options = options
  }
  setStyle(options){
    this.options =  Object.assign(this.options. options)
  }
}

1. 屬性：

• options中存儲(chǔ)了所有的繪圖屬性

• fillStyle：設(shè)置或返回用于填充繪畫的顏色、漸變或模式

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

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

• 使用的都是getContext("2d")對象的原生屬性，此處只列出了這三種屬性，需要的話還可以繼續(xù)擴(kuò)充。

• 有需要可以繼續(xù)擴(kuò)充

1. 方法：

• setStyle方法用于重新設(shè)置當(dāng)前精靈的屬性

• 有需要可以繼續(xù)擴(kuò)充

所有的精靈都繼承Element類。

子類

子類就是每一種精靈元素的具體實(shí)現(xiàn)，這里我們介紹一遍Circle元素的實(shí)現(xiàn)

class Circle extends Element {
  // 定位點(diǎn)的坐標(biāo)（這塊就是圓心），半徑，配置對象
  constructor(x, y, r = 0, options) {
    // 調(diào)用父類的構(gòu)造函數(shù)
    super(options)
    this.x = x
    this.y = y
    this.r = r
  }
  // 改變元素大小
  resize(x, y) {
    this.r = Math.sqrt((this.x - x) ** 2 + (this.y - y) ** 2)
  }
  // 移動(dòng)元素到新位置，接收兩個(gè)參數(shù)，新的元素位置
  moveTo(x, y) {
    this.x = x
    this.y = y
  }
  // 判斷點(diǎn)是否在元素中，接收兩個(gè)參數(shù)，點(diǎn)的坐標(biāo)
  choose(x, y) {
    return ((x - this.x) ** 2 + (y - this.y) ** 2) < (this.r ** 2)
  }
  // 偏移，計(jì)算點(diǎn)和元素定位點(diǎn)的相對偏移量（ofsetX， offsetY）
  getOffset(x, y) {
    return {
      x: x - this.x,
      y: y - this.y
    }
  }
  // 繪制元素實(shí)現(xiàn)，接收一個(gè)ctx對象，將當(dāng)前元素繪制到指定畫布上
  draw(ctx) {
    // 取到繪制所需屬性
    let {
      fillStyle,
      strokeStyle,
      lineWidth
    } = this.options
    // 開始繪制beginPath() 方法開始一條路徑，或重置當(dāng)前的路徑
    ctx.beginPath()
    // 設(shè)置屬性
    ctx.fillStyle = fillStyle
    ctx.strokeStyle = strokeStyle
    ctx.lineWidth = lineWidth
    // 畫圓
    ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
    // 填充顏色
    ctx.stroke()
    ctx.fill()
    // 繪制完成
  }
  // 驗(yàn)證函數(shù)，判斷當(dāng)前元素是否滿足指定條件，此處用來檢驗(yàn)是否將元素添加到場景中。
  validate() {
    return this.r >= 3
  }
}

arc() 方法創(chuàng)建弧/曲線（用于創(chuàng)建圓或部分圓）

• x    圓的中心的 x 坐標(biāo)。

• y    圓的中心的 y 坐標(biāo)。

• r    圓的半徑。

• sAngle    起始角，以弧度計(jì)。（弧的圓形的三點(diǎn)鐘位置是 0 度）。

• eAngle    結(jié)束角，以弧度計(jì)。

• counterclockwise    可選。規(guī)定應(yīng)該逆時(shí)針還是順時(shí)針繪圖。False = 順時(shí)針，true = 逆時(shí)針。

注意事項(xiàng)：

• 構(gòu)造函數(shù)的形參只有兩個(gè)是必須的，就是定位點(diǎn)的坐標(biāo)。

• 其它的形參都必須有默認(rèn)值。

所有方法的調(diào)用時(shí)機(jī)

• 我們在畫布上繪制元素的時(shí)候回調(diào)用resize方法。

• 移動(dòng)元素的時(shí)候調(diào)用moveTo方法。

• choose會(huì)在鼠標(biāo)按下時(shí)調(diào)用，判斷當(dāng)前元素是否被選中。

• getOffset選中元素時(shí)調(diào)用，判斷選中位置。

• draw繪制函數(shù)，繪制元素到場景上時(shí)調(diào)用。

scene場景的實(shí)現(xiàn)

1. 屬性介紹

class Sence {
  constructor(id, options = {
    width: 600,
    height: 400
  }) {
    // 畫布屬性
    this.canvas = document.querySelector('#' + id)
    this.canvas.width = options.width
    this.canvas.height = options.height
    this.width = options.width
    this.height = options.height
    // 繪圖的對象
    this.ctx = this.canvas.getContext('2d')
    // 離屏canvas
    this.outCanvas = document.createElement('canvas')
    this.outCanvas.width = this.width
    this.outCanvas.height = this.height
    this.outCtx = this.outCanvas.getContext('2d')
    // 畫布狀態(tài)
    this.stateList = {
      drawing: 'drawing',
      moving: 'moving'
    }
    this.state = this.stateList.drawing
    // 鼠標(biāo)狀態(tài)
    this.mouseState = {
    // 記錄鼠標(biāo)按下時(shí)的偏移量
      offsetX: 0,
      offsetY: 0,
      down: false, //記錄鼠標(biāo)當(dāng)前狀態(tài)是否按下
      target: null //當(dāng)前操作的目標(biāo)元素
    }
    // 當(dāng)前選中的精靈構(gòu)造器
    this.currentSpriteConstructor = null
    // 存儲(chǔ)精靈
    let sprites = []
    this.sprites = sprites
    /* .... */
  }
}

1. 事件邏輯

class Sence {
  constructor(id, options = {
    width: 600,
    height: 400
  }) {
  /* ... */
  // 監(jiān)聽事件
    this.canvas.addEventListener('contextmenu', (e) => {
      console.log(e)
    })
    // 鼠標(biāo)按下時(shí)的處理邏輯
    this.canvas.addEventListener('mousedown', (e) => {
    // 只有左鍵按下時(shí)才會(huì)處理鼠標(biāo)事件
      if (e.button === 0) {
      // 鼠標(biāo)的位置
        let x = e.offsetX
        let y = e.offsetY
        // 記錄鼠標(biāo)是否按下
        this.mouseState.down = true
        // 創(chuàng)建一個(gè)臨時(shí)target
        // 記錄目標(biāo)元素
        let target = null
        if (this.state === this.stateList.drawing) {
        // 判斷當(dāng)前有沒有精靈構(gòu)造器，有的話就構(gòu)造一個(gè)對應(yīng)的精靈元素
          if (this.currentSpriteConstructor) {
            target = new this.currentSpriteConstructor(x, y)
          }
        } else if (this.state === this.stateList.moving) {
          let sprites = this.sprites
          // 遍歷所有的精靈，調(diào)用他們的choose方法，判斷有沒有被選中
          for (let i = sprites.length - 1; i >= 0; i--) {
            if (sprites[i].choose(x, y)) {
              target = sprites[i]
              break;
            }
          }
          
          // 如果選中的話就調(diào)用target的getOffset方法，獲取偏移量
          if (target) {
            let offset = target.getOffset(x, y)
            this.mouseState.offsetX = offset.x
            this.mouseState.offsetY = offset.y
          }
        }
        // 存儲(chǔ)當(dāng)前目標(biāo)元素
        this.mouseState.target = target
        // 在離屏canvas保存除目標(biāo)元素外的所有元素
        let ctx = this.outCtx
        // 清空離屏canvas
        ctx.clearRect(0, 0, this.width, this.height)
        // 將目標(biāo)元素外的所有的元素繪制到離屏canvas中
        this.sprites.forEach(item => {
          if (item !== target) {
            item.draw(ctx)
          }
        })
        if(target){
            // 開始動(dòng)畫
            this.anmite()
        }
      }
    })
    this.canvas.addEventListener('mousemove', (e) => {
    //  如果鼠標(biāo)按下且有目標(biāo)元素，才執(zhí)行下面的代碼
      if (this.mouseState.down && this.mouseState.target) {
        let x = e.offsetX
        let y = e.offsetY
        if (this.state === this.stateList.drawing) {
        // 調(diào)用當(dāng)前target的resize方法，改變大小
          this.mouseState.target.resize(x, y)
        } else if (this.state === this.stateList.moving) {
        // 取到存儲(chǔ)的偏移量
          let {
            offsetX, offsetY
          } = this.mouseState
          // 調(diào)用moveTo方法將target移動(dòng)到新的位置
          this.mouseState.target.moveTo(x - offsetX, y - offsetY)
        }
      }
    })
    document.body.addEventListener('mouseup', (e) => {
      if (this.mouseState.down) {
      // 將鼠標(biāo)按下狀態(tài)記錄為false
        this.mouseState.down = false
        if (this.state === this.stateList.drawing) {
        // 調(diào)用target的validate方法。判斷他要不要被加到場景去呢
          if (this.mouseState.target.validate()) {
            this.sprites.push(this.mouseState.target)
          }
        } else if (this.state === this.stateList.moving) {
          // 什么都不做
        }
      }
    })
  }
}

1. 方法介紹

class Sence {
// 動(dòng)畫
  anmite() {
    requestAnimationFrame(() => {
      // 清除畫布
      this.clear()
      // 將離屏canvas繪制到當(dāng)前canvas上
      this.paint(this.outCanvas)
      // 繪制target
      this.mouseState.target.draw(this.ctx)
      // 鼠標(biāo)是按下狀態(tài)就繼續(xù)執(zhí)行下一幀動(dòng)畫
      if (this.mouseState.down) {
        this.anmite()
      }
    })
  }
  // 可以將手動(dòng)的創(chuàng)建的精靈添加到畫布中
  append(sprite) {
    this.sprites.push(sprite)
    sprite.draw(this.ctx)
  }
  // 根據(jù)ID值，從場景中刪除對應(yīng)元素
  remove(id) {
    this.sprites.splice(id, 1)
  }
  // clearRect清除指定區(qū)域的畫布內(nèi)容
  clear() {
    this.ctx.clearRect(0, 0, this.width, this.height)
  }
  // 重繪整個(gè)畫布的內(nèi)容
  reset() {
    this.clear()
    this.sprites.forEach(element => {
      element.draw(this.ctx)
    })
  }
  // 將離屏canvas繪制到頁面的canvas畫布上
  paint(canvas, x = 0, y = 0) {
    this.ctx.drawImage(canvas, x, y, this.width, this.height)
  }
  // 設(shè)置當(dāng)前選中的精靈構(gòu)造器
  setCurrentSprite(Element) {
    this.currentSpriteConstructor = Element
  }

關(guān)于HTML5 canvas如何實(shí)現(xiàn)畫圖程序就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。