《HTML5canvas開發詳解（第2版）》——第2章　在Canvas上繪圖2.1　本章基本檔案設定

非同步社群發表於2017-05-02
HTMLCanvas繪圖

本節書摘來自非同步社群《HTML5 canvas開發詳解（第2版）》一書中的第2章，第2.1節,作者： 【美】Steve Fulton , Jeff Fulton 更多章節內容可以訪問雲棲社群“非同步社群”公眾號檢視。

第2章　在Canvas上繪圖

HTML5 Canvas的使用是以強大的繪圖、著色和基本二維形狀變換為基礎的。然而，可供選擇的內建形狀相對有限，程式設計師可以通過一組稱作路徑的線段來繪製出想要的形狀。2.4節將涉及相關內容。

提示
可以採用線上形式很好地瞭解HTML5 Canvas API。WSC網站上有詳盡且不斷更新的參考，具體地描述了Canvas 2D繪圖API的功能。
然而，這個線上參考缺少使用API的具體例子。本書避免簡單地介紹各個引數的使用，將花時間通過建立示例來解釋並探索儘可能多的功能。
2.1　本章基本檔案設定
如同開始講到繪圖API時那樣，本章中的示例也將使用相同的基本檔案設定。這段程式碼為本書所有示例的基礎，使用時只需改變drawScreen()函式的內容即可，具體如下。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ch2BaseFile - Template For Chapter 2 Examples</title>

<script src="modernizr.js"></script>
<script type="text/javascript">
window.addEventListener(`load`, eventWindowLoaded, false);
function eventWindowLoaded(){

　 canvasApp();
}

function canvasSupport (){
　　 return Modernizr.canvas;
}

function canvasApp(){

if (!canvasSupport()){
　　　　　return;
　　 }else{
　　　var theCanvas = document.getElementById("canvas");
　　　var context = theCanvas.getContext("2d");
　 }

　 drawScreen();

　 function drawScreen(){
　　　//改變這裡
　　　context.fillStyle = `#aaaaaa`;
　　　context.fillRect(0, 0, 200, 200);
　　　context.fillStyle = `#000000`;
　　　context.font = `20px _ sans`;
　　　context.textBaseline = `top`;
　　　context.fillText ("Canvas!", 0, 0);

　 }
}

</script>

</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="500" height="500">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>


相關文章