原文位址：https://www.jeremyjone.com/462/ ， 轉載請注明。
代碼位址：https://github.com/jeremyjone/CanvasPaint ，需要請自行檢視。
認識canvas
<canvas>
是一個HTML元素，可用于通過腳本（通常是JavaScript）繪制圖形。
更多介紹，可以參考MDN的文檔。
這個系列我希望寫一個簡單的畫圖功能，并不是很困難，但是基本功能都會有接觸。先來看一下成品：
可以看到，涵蓋了普通形狀，箭頭形狀，橡皮，以及文字，就是一個簡單而又不失功能的畫闆。
那麼開始學習canvas吧。
一個簡單的canvas頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JS - Canvas - Base</title>
</head>
<body>
<canvas id="canvas" width="800" height="600" style="background-color: #fff">抱歉，您的浏覽器不支援canvas元素</canvas>
</body>
</html>
在
<body>
中建立一個
<canvas>
的元素，也就是我們的canvas控件，這樣就完成了建立。如果浏覽器不支援canvas控件，那麼會顯示中間的文字。
這時頁面上已經有控件了，但是我們什麼都看不到，因為他本身并沒有什麼顔色。。。我們可以通過添加JS方法來繪圖。
嘗試添加如下代碼：
var canvas = document.getElementById("canvas");
// 檢測浏覽器是否支援canvas 該方法是否存在 取得上下文對象
if (canvas.getContext) {
var context = canvas.getContext("2d"); //2d用引用括起來
if (canvas.getContext) {
// 設定陰影，陰影需要在圖形之前設定
context.shadowOffsetX = 10;
context.shadowOffsetY = 20;
context.shadowBlur = 2;
context.shadowColor = "yellow";
context.fillStyle = "red"; // 填充顔色為紅色
context.fillRect(10, 10, 150, 150); //用指定的顔色填充矩形
context.strokeStyle = "blue"; //描邊顔色為藍色
context.lineWidth = 4; //指定描邊線的寬度
context.strokeRect(10, 10, 150, 150); //用指定的顔色描邊矩形
}
}
打開頁面，會發現已經有東西了:
可以看到，現在已經出現了畫面。
這就是canvas的最基本用法。這裡介紹了填充色，填充方法，描邊色，描邊方法，以及陰影的使用方法。不過最基本的，這一切都以
var context = canvas.getContext("2d");
為基礎，這個
context
可以了解為一個畫筆，我們所有的繪制都是用它來完成。
有了這樣的基礎，我們就可以開始進行真正的繪制了。
在下一篇中，将會介紹基本圖形的繪制。