代碼即教程：HTML5初識Canvas ...
代碼即教程：HTML5初識Canvas
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Canvas示例</title> <!--[if lte IE 8]><script type="text/javascript" src="excanvas.js"></script><![endif]--> </head> <body> <p>Canvas的用途：</p> <p>動態生成和展示圖形、圖表、圖像以及動畫</p> <p>性能非常好：不需要將所繪製的圖像中的每個圖元當做對象存儲。API相對簡單</p> <p>canvas預設會創建一塊矩形區域 預設尺寸 300 X 150(px)</p> <p>canvas的坐標預設是0,0 也叫原點</p> <p>canvas也可以通過css的方式增加邊框、內邊距、外邊距等</p> <p>現在的大部分瀏覽器已經支持canvas<br />
老版本的IE不支持，可以使用一個js庫來做相容：explorercanvas.js <br>
js庫地址：https://github.com/arv/ExplorerCanvas </p> <canvas id="test" style="border:1px solid;" width="200" height="200"> 當瀏覽器不支持canvas時會顯示這段文字，這裡還可以使用圖片代替 </canvas> <script> function drawTest() { //獲取canvas元素及繪圖上下文對象 var canvas = document.getElementById('test'); var context = canvas.getContext('2d'); //用絕對坐標來創建一條路徑 context.beginPath(); context.moveTo(70, 140); context.lineTo(140, 70); context.stroke(); } window.addEventListener("load", drawTest, true); </script> </body> </html>
