標籤：body www. ack tco ext fill end mozilla 畫圖
Canvas ，HTML 5中引入它，可以做很多事情：畫圖、動畫、遊戲開發等等。
Canvas 元素
Canvas 中文翻譯為：畫布。
<canvas id=”yourCanvasId” width=”300” height=”150” />
Canvas元素除了公用屬性外，只有兩個額外的屬性：width, height,他們都是沒有單位的，其實單位是px，但是不能寫單位。如果不指定這兩個屬性，預設是width為300，height為150。
眾所周知，html元素的樣式，都可以用css樣式來指定。Canvas也不例外。
<html> <head> <title>Canvas - 01</title> <style> body{ background:#dddddd; } #canvas{ margin:20px; padding:20px; background:#ffffff; border:thin inset #aaaaaa; width:600px; height:300px; } </style> </head> <body> <canvas id="canvas"> Canvas not supported </canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"); ctx.font=‘38pt Arial‘; ctx.fillStyle=‘cornflowerblue‘; ctx.strokeStyle=‘blue‘; ctx.fillText("Hello Canvas", canvas.width/2 -150, canvas.height/2 + 15); ctx.strokeText("Hello Canvas stroke", canvas.width/2 -200, canvas.height/2 + 80); </script> </body></html>
我們期望的結果是這樣的：
而實際的執行結果：
從執行結果看，它確實一個放大的hello，這是為什麼呢？
其實我認為可以這樣理解它，它是一個放映布，因為真正的繪圖不在它上的，而是在一個繪圖板上，繪圖完畢投影到放映布上。這一點，類似於我們中學時候用過的投影片放映機，在一張玻璃板（繪圖板）上寫上習題，然後投影到放映布或者白牆上（畫布）。
所以呢，這樣一想，就明白了，當css樣式中的width,height屬性值與canvas元素的width,height的屬性值不同時，會自動的將繪圖板上的內容進行縮放到畫布上。
Canvas 元素目前有三個方法：
通過getContext(“2d”);能夠取得CanvasRenderingContext2D對象，然後就可以基於此內容物件來作2d圖了
通過getContext(“3d”);就可以進行3d作圖，3d作圖底層用的是WebGL。
在隨後的文章裡，將會學習使用Canvas畫圖的必要知識。
CanvasRenderingContext2D API 詳情：
http://www.w3school.com.cn/jsref/dom_obj_canvasrenderingcontext2d.asp
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
HTML5 Canvas：初始Canvas
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
