HTML5__canvas標籤

< canvas id="canvas1" width="550" height="400">< /canvas>

var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");

context.fillStyle = "#aabbff";
context.fillRect(100,100,100,100)

context.fillStyle = "#ffffff";
context.fillText("Hello World!!!",150,130);

HTML 5 新增 < canvas> 標籤。
藉由JavaScript 操作 HTML DOM CanvasRenderingContext2D 對象所提供的一組繪圖 API，
達到在畫布上繪圖的目的。

A.在html5中加入標籤：
< canvas height="400" id="canvas1" width="550">< /canvas>

B.取得canvas 畫布的參照：
var canvas = document.getElementById("canvas1");

C.取得 Context 繪圖環境的參照：
var context = canvas.getContext("2d");
這即是取得 CanvasRenderingContext2D 對象的參照
CanvasRenderingContext2D 對象提供了一組豐富而可在畫布上繪圖的圖形函數。

< !DOCTYPE HTML>
< html>
< head>
< meta charset="utf-8">
< title>無標題文件< /title>
< style type="text/css">
#canvas1 {
 color: #000000;
 font-size: 100px;
 background-color: #FC0;
 border: medium dotted #036;
}

< /style>< /head>

< body>
< canvas id="canvas1" width="550" height="400">< /canvas>
< script language="javascript">
//
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
//
context.fillStyle = "#aabbff";
context.fillRect(100,100,100,100)
context.fillStyle = "#ffffff";
context.fillText("Hello World!!!",150,130);

< /script>

< /body>
< /html>