DAY 25. JavaScript Canvas 操作

2018鐵人賽 javascript canvas

Cian

2017-12-28 00:08:42

6736 瀏覽

分享至

DAY 25. JavaScript Canvas 操作

元素Canvas相信大家一定耳熟能響，所以關於Canvas是一個什麼東西在此不多贅述
但不管是什麼原因，或許你還沒真正的開始接觸它
就讓我們一起開始好好的認識Canvas吧！

建立 Canvas

方式(一)

<canvas id="myCanvas" width="256" height="256"></canvas>

const canvas = document.getElementById('myCanvas')

方式(二)

const canvas = document.createElement('canvas')
canvas.width = 256
canvas.height = 256
canvas.style.width = '256px'
canvas.style.height = '256px'
document.body.appendChild(canvas)

首先我們展示了兩種建立Canvas的方式。
如果使用HTML元素方法建立，強烈建議給予id方便之後JS操作
請特別注意閉合標籤</canvas>是必要的。

而第二種方式是個人比較喜歡的方式，直接在JS建立，之後在使用appenChild方法
將Canvas插入文件，因為Canvas本身是沒有東西的，它的內容依賴我們使用JS建立，所以不管如何最終我們都必須使用JS，因此對我來說這個方法比較直接。

如果需求比較特殊，需要在Node中使用Canvas
那麼可以參考node-canvas
使用前請特別注意環境需求，必須先把相關依賴安裝完成才能正確使用該套件。

操作 Canvas

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')

Canvas實例方法getContext接受兩個參數
第一個參數contextType, 多數時候我們都會指定2d, 其餘的進階選項有興趣請自行閱讀MDN HTMLCanvasElement.getContext()
第二個參數contextAttributes, 依照第一個參數給予不同的contextType而有所不同，通常contextType選擇2d可以不用設定此參數。

矩形

fillRect(x, y, width, height)

畫出一個填滿的矩形。
x, y為矩形起始點，width, height為實際矩形大小

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')

// 設定顏色
ctx.fillStyle = 'rgb(200, 200, 0)'
// 畫出矩形
ctx.fillRect (10, 10, 55, 50)

// 再次設定顏色
ctx.fillStyle = 'rgba(0, 0, 200, 0.75)'
// 畫出矩形
ctx.fillRect (30, 30, 55, 50)

// 將canvas 加入body
document.body.appendChild(canvas)

strokeRect(x, y, width, height)

畫出一個矩形的邊框
x, y為矩形起始點，width, height為實際矩形大小

clearRect(x, y, width, height)

清除指定矩形區域內的內容，使其變為全透明。
x, y為矩形起始點，width, height為實際要清除的矩形範圍

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')

// 設定顏色並劃出實心矩形
ctx.fillStyle = 'rgba(255, 0, 0, .7)'
ctx.fillRect(25,25,100,100)

// 從座標(45, 45)向又向下清除60像素顏色
ctx.clearRect(45, 45, 60, 60)

// 從座標(50, 50)向右向下畫出一個寬高50的矩形，但只有外框
ctx.strokeRect(50, 50, 50, 50)

document.body.appendChild(canvas)

弧形

arc(x, y, radius, startAngle, endAngle, anticlockwise)

注意到地3個參數radius(弧度)，並非degrees(角度)，考慮以下函示轉換其數值。

function degrees2radians(degrees) {
    const radians = (Math.PI / 180) * degrees
    return radians
}
function radians2degrees(radians) {
    const degrees = radians / (Math.PI / 180)
    return degrees
}

最後一個參數anticlockwise使用布林值代表順時或逆時作圖

false 順時
true 逆時

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')

ctx.beginPath()
let x = 50
let y = 50
let radius = 15
let startAngle = 0
let endAngle = Math.PI * 1.5
let anticlockwise = false
ctx.fillStyle = 'blue'
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)
ctx.fill()

ctx.beginPath()
x = 100
y = 50
endAngle = Math.PI * 1.5
anticlockwise = true
ctx.fillStyle = 'rgba( 255, 0, 0, 1)'
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)
ctx.fill()

document.body.appendChild(canvas)

這個範例展示了屬性anticlockwise對畫弧的正反影響
以及方法beginPath重置繪圖路徑和moveTo提筆至指定坐標的簡單示範
我們將在下個範例做更多有關他們的介紹

線條

繪製線條最重要的4個方法

beginPath
cloasePath
moveTo
lineTo

我們完全可以照字面上的意思去解讀他們，beginPath代表我們要開始畫一個新的圖案
closePath代表我們畫完了一個圖案，moveTo代表我們將畫筆提至Canvas的座標x, y
lineTo代表我們從當前位置畫線到指定的座標x, y

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d')

// 實心三角形
ctx.fillStyle = 'red'
ctx.beginPath()
ctx.moveTo(25, 25)
ctx.lineTo(105, 25)
ctx.lineTo(25, 105)
ctx.fill()

// 空心三角形
ctx.strokeStyle = 'blue'
ctx.beginPath()
ctx.moveTo(125, 125)
ctx.lineTo(125, 45)
ctx.lineTo(45, 125)
ctx.closePath()
ctx.stroke()

document.body.appendChild(canvas)

範例一首先使用beginPath開啟/重置繪圖
接著移動畫筆到指定坐標25, 25然後使用lineTo方法化兩條線，最後使用fill方法將其填色

範例二為了確保重新繪製地個三角形，因此一開始立即再次的調用beginPath方法
接著moveTo提起畫筆至125, 125然後使用lineTo畫兩條線，最後使用closePath方法使stroke方法能正確的圖形閉合