什麼是 Canvas？
HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像。
畫布是一個矩形區域，您可以控制其每一像素。
canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法
Canvas 對象
Canvas 對象表示一個 HTML 畫布元素 - <canvas>。它沒有自己的行爲，但是定義了一個 API 支持腳本化客戶端繪圖操作。
你可以直接在該對象上指定寬度和高度，但是，其大多數功能都可以通過 CanvasRenderingContext2D 對象獲得。 這是通過 Canvas 對象的 getContext() 方法並且把直接量字符串 "2d" 作爲唯一的參數傳遞給它而獲得的。
Canvas 對象的屬性
height 屬性
畫布的高度。和一幅圖像一樣，這個屬性可以指定爲一個整數像素值或者是窗口高度的百分比。當這個值改變的時候，在該畫布上已經完成的任何繪圖都會擦除掉。默認值是 300。
width 屬性
畫布的寬度。和一幅圖像一樣，這個屬性可以指定爲一個整數像素值或者是窗口寬度的百分比。當這個值改變的時候，在該畫布上已經完成的任何繪圖都會擦除掉。默認值是 300。
Canvas 對象的方法
| 方法 | 描述 |
|---|---|
| getContext() | 返回一個用於在畫布上繪圖的環境。 |
創建 Canvas 元素
向 HTML5 頁面添加 canvas 元素。
規定元素的 id、寬度和高度：
- <canvas id="myCanvas" width="200" height="100"></canvas>
通過 JavaScript 來繪製
canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在 JavaScript 內部完成：
- <script type="text/javascript">
- var c=document.getElementById("myCanvas");
- var ccxt=c.getContext("2d");
- cxt.fillStyle="#FF0000";
- cxt.fillRect(0,0,150,75);
- </script>
JavaScript 使用 id 來尋找 canvas 元素：
- var c=document.getElementById("myCanvas");
然後，創建 context 對象： var cxt=c.getContext("2d");
getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。
下面的兩行代碼繪製一個紅色的矩形： cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75); fillStyle 方法將其染成紅色，fillRect 方法規定了形狀、位置和尺寸。理解座標
上面的 fillRect 方法擁有參數 (0,0,150,75)。意思是：在畫布上繪製 150x75 的矩形，從左上角開始 (0,0)。如下圖所示，畫布的 X 和 Y 座標用於在畫布上對繪畫進行定位。
包括前幾篇DEMO都涉及了大量的座標，那這些座標是如何準備得到的呢，我們實際開發如何得到我們想要的座標點?下面給出一個獲取canvas座標點的DEMO：
- <!DOCTYPE HTML>
- <html>
- <head>
- <style type="text/css">
- body
- {
- font-size:70%;
- font-family:verdana,helvetica,arial,sans-serif;
- }
- </style>
- <script type="text/javascript">
- function cnvs_getCoordinates(e)
- {
- x=e.clientX;
- y=e.clientY;
- document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
- }
- function cnvs_clearCoordinates()
- {
- document.getElementById("xycoordinates").innerHTML="";
- }
- </script>
- </head>
- <body style="margin:0px;">
- <p>把鼠標懸停在下面的矩形上可以看到座標：</p>
- <div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
- <br />
- <br />
- <br />
- <div id="xycoordinates"></div>
- </body>
- </html>