Canvas 基本繪製（上）
HTML5學堂：之前的文章與大家分享了SVG的一系列操作，但是SVG也是存在一些劣勢，所以今天開始為大家分享介紹HTML5 Canvas的相關知識，Canvas是什麼呢？又如何進行Canvas進行影象的繪製呢？在Canvas當中有哪些繪製圖形的方法？來看看下面的文章吧。
Canvas與SVG的比較
Canvas的基本知識 - 什麼是Canvas
canvas標記由Apple在Safari 1.3 Web 瀏覽器中引入
canvas是HTML5新增的一個標籤，它的主要作用是畫向量圖；
canvas的API介面提供給了JavaScript；
Canvas的基本知識 - 使用Canvas能夠做什麼
canvas能做動畫，但不是為動畫而生，能做遊戲，能做特別炫的效果，主要是為畫圖而生。
canvas元素本身並沒有繪製能力（它僅僅是圖形的容器） - 您必須使用指令碼來完成實際的繪圖任務。
Canvas的基本知識 - getContext物件
getContext()方法可返回一個物件，該物件提供了用於在畫布上繪圖的方法和屬性。引數為2d，目前只有2d的合法
注意：canvas有預設寬高，如果使用css設定Canvas畫布的大小，則導致畫布按比例縮放到你設定的值，所以canvas畫布寬高的設定需要在標籤中，使用屬性的設定方法進行設定。
Canvas設定大小測試例項
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5學堂</title> <link rel="stylesheet" href="../css/reset.css"> <script src="../js/jquery-1.8.3.min.js" charset="utf-8" type="text/javascript"></script> <style> .can-one { border: 1px solid #999; } .can-two { width: 200px; height: 100px; border: 1px solid #999; } </style> </head> <body> <canvas id="testCanvasOne" width="400" height="200" class="can-one"></canvas> <canvas id="testCanvasTwo" width="400" height="200" class="can-two"></canvas> <canvas id="testCanvasThree" width="200" height="100" class="can-one"></canvas> <script> var testCanvasOne = $("#testCanvasOne")[0]; var contextOne = testCanvasOne.getContext("2d"); contextOne.beginPath(); contextOne.rect(180, 80, 40, 40); contextOne.stroke(); contextOne.closePath(); var testCanvasTwo = $("#testCanvasTwo")[0]; var contextTwo = testCanvasTwo.getContext("2d"); contextTwo.beginPath(); contextTwo.rect(180, 80, 40, 40); contextTwo.stroke(); contextTwo.closePath(); var testCanvasThree = $("#testCanvasThree")[0]; var contextThree = testCanvasThree.getContext("2d"); contextThree.beginPath(); contextThree.rect(180, 80, 40, 40); contextThree.stroke(); contextThree.closePath(); </script> </body> </html>
程式碼效果圖：
路徑
路徑通常指存在於多種計算機圖形設計軟體中的以貝塞爾曲線為理論基礎的區域繪製方式。繪製時產生的線條稱為路徑。 路徑由一個或多個直線段或曲線段組成。 線段的起始點和結束點由錨點標記，就像用於固定線的針。 通過編輯路徑的錨點，您可以改變路徑的形狀。 您可以通過拖動方向線末尾類似錨點的方向點來控制曲線。路徑可以是開放的，也可以是閉合的。 對於開放路徑，路徑的起始錨點稱為端點。
Canvas基本方法
開始與閉合路徑
beginPath( )、closePath( )移動畫筆與畫線
moveTo(x, y)、lineTo(x, y)描繪路徑與填充路徑
stroke( )、fill( )
文字繪製方法
strokeText(text, x, y, maxWidth)：繪製文字輪廓
fillText(text, x, y, maxWidth)：填充文字text即是要寫入的文字，x、y為文字起始位置的座標，maxWidth為文字的寬度，能夠防止文字太寬而溢位，瀏覽器會縮減文字以適應寬度
Canvas基本方法操作例項
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5學堂</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
.draw {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="testCanvas" width="300" height="150" class="draw"></canvas>
<script>
var testCanvas = document.getElementById("testCanvas");
// 獲取getContext()物件
var context = testCanvas.getContext("2d");
// 開始路徑
context.beginPath();
// 移動畫筆
context.moveTo(20, 20);
// 畫線
context.lineTo(280, 20);
context.lineTo(280, 130);
context.lineTo(20, 130);
context.lineTo(20, 20);
// 繪製路徑
context.stroke();
// 填充路徑
// context.fill();
// 關閉路徑
context.closePath();
</script>
</body>
</html>程式碼效果圖：
學完了，來點作業吧~
利用該文章講解的canvas知識點來完成下圖。
