Day8 HTML5 Canvas

發表於 | 分類於 | 閱讀次數:
| 795

Demo

之前參加六角學院有寫過Canvas Game所以這次範例對我來說還算輕鬆
有時候知道要做什麼，但不常寫還是容易忘記。

以前作品:CanvasGame

起手式

就是先定義畫布

1
2
3
const canvas = document.querySelector('#draw')
const ctx = canvas.getContext('2d')
canvas

這邊還是不得不推薦吳哲宇老師動畫互動網頁特效入門（JS/CANVAS）的課程，有興趣想深入學習的可以考慮看看。或者只使用 JavaScript 的 2D 打磚塊遊戲也可以逐步的練習Canvas

定義幾個變數

有些變數並不是一開始就可以完全想到並且定義他，越熟練會定義越快，不熟練也沒關係，邊做邊定義也可。

1
2
3
4
let startDrawing = false
let startPos = {x:0,y:0}
let hue = 0;//顏色
let direction = true;//判斷變粗或變細

startDrawing：用來判斷開始或結束繪製
startPos：我們必須知道從什麼位置開始畫

事件觸發

什麼人、在什麼時候做、什麼事情：
畫布在滑鼠按下的時候並且移動才可以開始畫圖，而且離開時要停止畫圖。
所以總共有4個事件：mousedown、mousemove、mouseup、mouseleave

1
2
3
4
5
6
7
canvas.addEventListener('mousedown',e => {
  startDrawing = true;
  startPos = { x:e.offsetX , y:e.offsetY }
})
canvas.addEventListener('mousemove',draw)
canvas.addEventListener('mouseup', () => { startDrawing = false; })
canvas.addEventListener('mouseleave', () => { startDrawing = false; })

  1. 當滑鼠按下時，startDrawing變成ture並且取得現在滑鼠位置
  2. 滑鼠移動時開始畫
  3. 滑鼠放開時，startDrawing變成false（不畫了）
  4. 滑鼠離開這畫面時，startDrawing變成false（也不畫了）

mouseleave和mouseout差別

這裡和這裡有個很好的範例。

主要就是處理冒泡事件的方式不同

開始畫圖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function draw(e){
  if(startDrawing){
    ctx.beginPath()
    ctx.moveTo(startPos.x, startPos.y);
    ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    //關鍵:畫完後起點要跑到滑鼠位置
    startPos = { x:e.offsetX , y:e.offsetY }
    //顏色
    hue >= 360 ? hue = 0 : hue++
    if(ctx.lineWidth>=100||ctx.lineWidth<=1) direction=!direction
    direction ? ctx.lineWidth++ : ctx.lineWidth--
  }
}

ctx開頭的部分就是canvas繪畫的過程這邊就不贅述
幾個重點提到：

  • if(startDrawing)：就是我們一開始說的判斷是否可以開始畫。
  • startPos:因為我們會連續觸發繪畫，每畫一次都要移動startPos，而這個startPos就是我們的滑鼠位置，每次都從(startPos.x, startPos.y)畫到{ x:e.offsetX , y:e.offsetY }
  • hue：(自定義的名稱)顏色，值為0~360。
  • direction：因範例需要變大變小的輪迴，所以再定義一個direction去判斷什麼時候該變大或變小。

HSL Color，Amos有詳細介紹過。

HSL(色相角度但不加單位0~360, 色彩飽和度0~100%, 色彩亮度0~100%)

HSL( 240, 100%, 50% )

補充

lineJoin 介紹
lineCap 介紹

還有許多Canvas的屬性雖然無法全部記下來，但至少要知道然後會查就可以了。

不負責任聲明ಥ◡ಥ：
純屬個人筆記，每個範例都有不同的寫法，還有很多細節可以加入，有任何問題都歡迎提出一起研究哦，我會很感謝您的！- 2018.08.14

0%