簡介

豬油哭～拿咧嚕～ 大家好，歡迎來到 Canvas 關卡最後一天，相信大家不止有能力打倒 鎖鏈康妮，連鬼血術都是 pice of cake 了對吧？

那麼今天就來試試看破解下弦的鬼血術吧！

亂數箭頭

• 一樣，我們先建立好 Canvas 的框架與樣式：

<canvas class="arrow"></canvas>

.arrow {
	border: solid 2px;
}

• 建立 Canvas 環境的 Instance 先把畫布的寬、高、元素選取等做好

class Canvas {
  constructor(canvas) {
		// console.log(options.selector)
    this.width = canvas.width;
    this.height = canvas.height;

    this.canvas = document.querySelector(canvas.selector);
	this.canvas.width = this.width;
    this.canvas.height = this.height;

    this.context = this.getCanvasContext();
  }

  getCanvasContext() {
    return this.canvas.getContext('2d');
  }
} 

• 因為到時候會傳入多組元素，所以我們將多組元素用陣列包裝起來並傳入畫布中。

this.elements = canvas.elements || [];

• 設定元素在畫布每一幀的移動方式

update() {
    this.elements.forEach(element => {
        element.move(this.context);
    })
}

• 設定元素在畫布每一幀的繪圖方式

render() {
    this.context.clearRect(0, 0, 400, 400);
    this.elements.forEach(element => {
    element.drawPath(this.context);
    })
}

• 利用 window.requestAnimationFrame 讓瀏覽器自動運算元素在畫布上播放的方式

play() {
    window.requestAnimationFrame(this.play.bind(this));
    canvasArea.update()
    canvasArea.render()
}

• 建立元素的 Instance ，設定好元素的寬、高

constructor(x,y) {
    this.x = x
    this.y = y
}

• 繪製箭頭圖形

drawPath(context) {
    context.fillStyle = "red"
    context.beginPath()
    context.moveTo(this.x, this.y)
    context.lineTo(this.x+50, this.y+50)
    context.lineTo(this.x-50, this.y+50)
    context.closePath()
    context.fill();

    context.fillRect(this.x-25, this.y+50, 50, 300)
}

• 設定箭頭圖形移動的座標軸

move(context){
    this.x = this.x > 100 ? 0 : this.x + 10;
    this.y = this.y > 100 ? 0 : this.y + 10;
}

• 利用 new 來建立 Canvas 畫布的實體物件

const canvasArea = new Canvas({
  selector: '.arrow',
  width: 400,
  height: 400,
});

• 利用 new 來建立箭頭元素的實體物件，可以設置多組

const arrow01 = new Arrow(200, 300)
const arrow02 = new Arrow(50, 300)

• 利用陣列將多組箭頭元素包裝起來，並傳入畫布

const canvasArea = new Canvas({
  selector: '.arrow',
  width: 400,
  height: 400,
  elements: [arrow01, arrow02]
});

• 最後，呼叫畫布 Instance 內的播放 method

canvasArea.play();

完成

水之呼吸・柒之型 —— 雫波紋擊刺

今天的範例大家有理解嗎？其實 Canvas 還可以更進一步運用到事件綁定，且今日的範例並沒有設置 reload 模式。如果有時間的話筆者會再深入研究並且補充如何讓這個動畫有更多的互動性的～

那麼今天就到這邊，大家明天見！

======= //////////////////////// =======
鎖鏈的康妮 被打敗了

【勇者】得到了65Exp！
【勇者】升级了！
【勇者】獲得大瓶生命藥水5、康妮的鎖鏈1、金幣*65

是否挑戰下一層？ 【Yes】 【No】
======= //////////////////////// =======