今天繼續來做JS30~!說真的，因為插入了node跟其他課程，這部分的進度停了好幾天QAQ
這次的主題較為特別，利用了HTML的canvas標籤做一個簡單的畫布，配合JS的事件監聽完成奇妙的小畫家系統~!
HTML
<body> <canvas id="draw" width="800" height="800"></canvas> </body>
CSS
html,
body {
margin: 0;
}
Javascript
const canvas = document.querySelector('#draw')
const ctx = canvas.getContext('2d')
//將畫布設至為視窗大小
canvas.width = window.innerWidth
canvas.height = window.innerHeight
//設置畫筆的粗度以及形狀
ctx.lineJoin = 'round'
ctx.lineCap = 'round'
ctx.lineWidth = 25;
//設置flag以及起始座標
let isDrawing = false;
let lastX = 0;
let lastY = 0;
//色彩設置
let hue = 0
function draw(e) {
if (!isDrawing) return;
ctx.strokeStyle = `hsl(${hue},100%,50%)`
ctx.beginPath()
ctx.moveTo(lastX, lastY)
ctx.lineTo(e.offsetX, e.offsetY)
ctx.stroke();
[lastX, lastY] = [e.offsetX, e.offsetY]
hue <= 360 ? hue++ : hue = 0;
}
canvas.addEventListener('mousedown', (e) => {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY]
});
canvas.addEventListener('mousemove', draw)
canvas.addEventListener('mousedown', () => isDrawing = true)
canvas.addEventListener('mouseup', () => isDrawing = false)
canvas.addEventListener('mouseout', () => isDrawing = false)
學習重點
- 利用mousemove、 mousedown、 mouseup以及mouseout等不同事件操作HTML元素
- 了解hsl顏色設置(類似RGB，不過起點是紅色，另外還帶有其他參數)
- 了解如何在canvas上繪製路徑
ctx.beginPath() 開啟路徑
ctx.moveTo(起點位置)
ctx.lineTo(終點位置)
ctx.stroke()結束路徑
在觸動mousemove事件時，都會在事件內儲存offsetX以及offsetY的參數，利用這兩個參數來做為終點位置的座標。
最終成品
設置完JS部分的程式碼後，就可以畫自己想畫的東西囉! 順帶一提，我畫的是皮卡丘，我繪畫水平跟小孩子沒兩樣，當時在補習班教書我屢戰屢敗給一群小鬼頭。
參考文章
Danny的學習紀錄 