前言

「你好啊鐵人們，真沒想到你可以到第十七章來呢，不過就到這裡為止了，接下來由我 鎖鏈的 Canvas 來做你的對手！」

沒...沒想到好不容易撐到了鐵人賽的中場，居然殺出了這麼一個 BOSS...(吐血)，難到...我轉職後的第二人生，就到這邊為止了嗎？！

不用擔心，各位鐵人們，還有我在啊！接下來就讓我們好好了解一下 Canvas 這個難纏的敵人吧！

簡介

當工程師小小的美術魂正在燃燒時，除了 SVG 之外，我們還有什麼方法可以在網頁上盡情的揮灑創意揮灑愛呢？相信大家第一直覺就會想到 Canvas 對吧～

由於 Canvas 是由 HTML tag 以及 JavaScript 語法所製作，所以在進入 Canvas 篇章之前，記得要先去了解一下 HTML 及 JavaScript 語法喔～

那麼 Canvas 是什麼呢？他其實就是一個 HTML tag 讓我們可以在網頁上定義一個畫布區域 並由 JavaScript context 物件來即時運算圖形並且繪製。它有點像是 img 元素，不過 Canvas 只有 寬度高度 Canvas 可以控制，若是在 Canvas 上繪製的圖形有點扭曲，請嘗試用 Canvas 的 寬高來設定，而不是使用 CSS 來控製寬高。

在瀏覽器中，有些舊版本的瀏覽器並不支援 Canvas tag，因此 Canvas 有為瀏覽器準備了一些錯誤替代訊息。

<!-- 文字錯誤訊息 -->
<canvas id="stockGraph" width="150" height="150">
  這是錯誤文字錯誤訊息
</canvas>
<!-- 圖片錯誤訊息 -->
<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt="Error"/>
</canvas>

基礎 Canvas 語法

• 建立畫布

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

• 宣告一個變數抓取 Canvas 元素

let canvas = document.getElementById('mydraw')

• 宣告繪圖環境，在這邊我們是使用 2D 渲染上下文

let ctx = canvas.getContext('2d')

• 設定畫部寬高

canvas.width= 400
canvas.height= 400

如此一來，我們就有一張基礎畫布可以用囉～

繪製基礎圖形

在 SVG 篇章我們有講解到在電腦繪圖的世界裡，圖形是如何被繪製出來的，以及圖形定位。

還是熟悉的圖片最對味～

了解了圖片定位之後，我們來了解一下 Canavs 的基礎圖形吧！

rectangles 矩形

跟 SVG 圖形不同的是，Canvas 只支援一種基礎圖形 - 矩形。其餘的圖形包含圓形，皆是使用路徑函式來繪圖。

ctx.fillRect(25, 25, 100, 100);

paths 路徑繪圖

在 Canvas 中我們繪製基礎的圖形除了矩形外都是需要使用路徑來繪製，下面介紹一下路徑繪製的基礎語法。

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(300, 100);
ctx.lineTo(300, 200);
ctx.lineTo(300, 300);
ctx.closePath();
ctx.fill()

Arcs 弧形

若是想繪製圓形類的圖形，我們可以用弧形來繪製。

ctx.beginPath();
ctx.moveTo(200, 200);
ctx.arc(200, 200, 100, 0, Math.PI, true)
ctx.closePath();
ctx.fill()

那麼今天對於 Canvas 的基礎介紹就到這邊，哼哼哼看來就算是 Canvas 大魔王也沒有什麼嗎！了解了之後就沒有這麼可怕啦！

那麼明天我們會稍微來介紹一下 Canvas 動畫，那麼我們明天見～掰掰！

參考資料

• W3.org - HTML Canvas 2D Context
• MDN -Canvas tutorial