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"></canvas>
<canvas id="testCanvasTwo" width="400" height="200"></canvas>
<canvas id="testCanvasThree" width="200" height="100"></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"></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知識點來完成下圖。
本文來源：HTML5學堂
想了解更多資訊，請點擊左下方的閱讀原文