Table of Contents

• Canvas
• 用Javascript指定呈現的內容
• 讓使用者自行繪製圖片
• 事件拆分
• 實作
• 實作延伸
• References

Canvas

Canvas是由HTML5提供的新API，是一個點陣圖的區域，可透過Javascript跟HTML的<canvas>繪製圖片，主要用在2D圖片，除此之外也有多種像是動畫或者遊戲的用途。
可以指定API繪製圖形，也可以透過事件讓使用者繪製想畫的內容。

一開始需要創建一個畫布。當使用CSS更改尺寸時，等於是為畫布縮放尺寸，如果想要更改尺寸的話，要對元素中的屬性或者canvas屬性中的width跟height更改。

<canvas id="canvas"></canvas>

取得畫布的節點後，指定畫布的使用類型。

const canvas = document.querySelector('#canvas');
const canvasContext = canvas.getContext("2d");

用Javascript指定呈現的內容

來畫一個三角形：

<canvas id="canvas"></canvas>

/* 用來確認畫布大小 */
#canvas{
  background-color:#999999;
}

const canvas = document.querySelector('#canvas');
const canvasContext = canvas.getContext("2d");

//開始繪製路徑
canvasContext.beginPath()
//修改線條的顏色
canvasContext.strokeStyle = "blue";
//指定繪圖起點
canvasContext.moveTo(20, 20);
//指定延伸的路徑
canvasContext.lineTo(200, 20);
canvasContext.lineTo(100, 100);
canvasContext.lineTo(20, 20);
//繪製路徑
canvasContext.stroke();

讓使用者自行繪製圖片

事件拆分

1.在滑鼠點擊的時候，確定一開始的位置
2.在滑鼠持續下筆且移動的時候，捕捉下筆的位置
3.在滑鼠不點擊，就不會在畫布上作畫

實作

const canvas = document.querySelector('#canvas');
const canvasContext = canvas.getContext("2d");
//宣告下筆的初始座標
let downX = null;
let downY = null;

//抓下筆的位置
canvas.addEventListener('mousedown',(e)=>{
  downX = e.offsetX;
  downY = e.offsetY;
})

//讓滑鼠移動的時候能畫出圖來
canvas.addEventListener('mousemove',(e)=>{
  canvasContext.beginPath();
  canvasContext.moveTo(downX,downY);
  canvasContext.lineTo(e.offsetX,e.offsetY);
  canvasContext.stroke();
})

這時候有個問題是，只要把滑鼠移動進去範圍內，線條就會從(0,0)的位子發散出線條，所以這時候需要給一個開關，讓他按下去的時候才會畫圖。

let downX = null;
let downY = null;
let isDrawing = false;

canvas.addEventListener('mousedown',(e)=>{
    //點擊的時候，開始畫圖
  isDrawing = true;
  downX = e.offsetX;
  downY = e.offsetY;
})

canvas.addEventListener('mousemove',(e)=>{
    //沒有在畫圖就不要執行
  if (!isDrawing) return;
  canvasContext.beginPath();
  canvasContext.moveTo(downX,downY);
  canvasContext.lineTo(e.offsetX,e.offsetY);
  canvasContext.stroke();
})

雖然可以在指定的位置開始再畫圖，但是mousedown只會觸發在最一開始，也就是說我們需要隨時更新moveTo，才會讓他隨著移動的方向畫出線條。

let downX = null;
let downY = null;
let isDrawing = false;

canvas.addEventListener('mousedown',(e)=>{
  isDrawing = true;
  downX = e.offsetX;
  downY = e.offsetY;
})

canvas.addEventListener('mousemove',(e)=>{
  if (!isDrawing) return;
  canvasContext.beginPath();
  canvasContext.moveTo(downX,downY);
  canvasContext.lineTo(e.offsetX,e.offsetY);
  canvasContext.stroke();
    //讓初始座標隨著筆刷變動而更改
  [downX,downY] = [e.offsetX,e.offsetY]
})

讓mousemove事件本身產生的數值變成自己的下筆初始值，可以成功的畫出黑色的線條，但是沒有讓滑鼠放開之後，恢復drawing的判斷，所以這時候要加上mouseup的事件。

整理上面的內容，下面是目前完整Javascript程式碼：

const canvas = document.querySelector('#canvas');
const canvasContext = canvas.getContext("2d");

let downX = null;
let downY = null;
let isDrawing = false;

function startDraw(event){
  isDrawing = true;
  downX = event.offsetX;
  downY = event.offsetY;
}

function drawing(event){
  if (!isDrawing) return;
  canvasContext.beginPath();
    //更改筆刷形狀
  canvasContext.lineCap = "round";
    //更改筆刷尺寸
  canvasContext.lineWidth = `50`;
  canvasContext.moveTo(downX,downY);
  canvasContext.lineTo(event.offsetX,event.offsetY);
  canvasContext.stroke();
  [downX,downY] = [event.offsetX,event.offsetY]
}

canvas.addEventListener('mousedown',startDraw)
canvas.addEventListener('mousemove',drawing)
//如果沒有繼續按住滑鼠，就停止繪圖
canvas.addEventListener('mouseup',() =>isDrawing = false)

實作延伸

在上面學完基本的操作之後，加上之前學到的內容，快速為這個網頁增加幾個功能：

1. 可以選擇下筆時的顏色
2. 可以選擇筆刷的大小
3. 可以清除畫上去的內容

也發現對著畫圖的框框內右鍵可以儲存圖片。
目前只能做到滑鼠繪圖，歡迎大家拿去畫圖:D

References

Canvas API

CanvasRenderingContext2D: beginPath() method