早期網頁要顯示圖形只能藉著貼上外部圖片來完成。
例如:
<img src="圖片" width="200" height="100">
HTML5可以使用canvas標籤，搭配canvas api，使用javascript來完成繪圖。
canvas標籤(也可說canvas是一個以像素為基礎的點陣圖畫布)
<canvas id="canvastest" witdth="300" height="300"></canvas>
使用javascript取得canvas元素DOM的物件
var canvas = document.getElementById("canvastest");
範例:
<!DOCTYPE html>
<html>
<head>
<script type="application/x-javascript">
function canvastest() {
var canvas = document.getElementById("canvastag");
if (canvas.getContext) { // 檢查瀏覽器是否支援canvas
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)"; // 把「填滿樣式」設為紅 200 綠 0 藍 0
ctx.fillRect (10, 10, 50, 50); // 畫一個填充的長方形
ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; // 把「填滿樣式」設為紅 0 綠 0 藍 200 透度 0.5
ctx.fillRect (30, 30, 50, 50); // 畫一個填充的長方形
}
}
</script>
</head>
<body onload="canvastest()">
<canvas id="canvastag" width="300" height="300"></canvas>
</body>
</html>
利用計時器canvas也可以製作動畫。另外，其實Flash CS5也有將自家動畫轉成HTML5 canvas程式碼的功能。
其實Adobe是可以將Flash與illustrator的向量圖轉成FXG格式，透過HTML 5的Canvas元素來呈現。技術上是可以利用Flash製作動畫、互動遊戲後，輸出成Javascript、HTML5開放標準網頁的。
向量圖形又如何?
向量圖是完全根據向量來呈現影像的幾何基元 (形狀、點、線及多邊形)。使用向量圖形當成網頁的背景影像，以支援高 DPI 及「捏合」縮放功能。例如繪製地圖。
向量圖可以使svg標籤
範例:
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
SVG Code explanation:
An SVG image begins with an <svg> element
The width and height attributes of the <svg> element define the width and height of the SVG image
The <circle> element is used to draw a circle
The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0, 0)
The r attribute defines the radius of the circle
The stroke and stroke-width attributes control how the outline of a shape appears. We set the outline of the circle to a 4px green "border"
The fill attribute refers to the color inside the circle. We set the fill color to yellow
The closing </svg> tag closes the SVG image
Note: Since SVG is written in XML, all elements must be properly closed!
下表列出了canvas 與SVG 之間的一些不同之處:
Canvas
點陣圖
放大到一定程度後會模糊
不支持事件處理器(要使用javascript)
能夠以 .png 或 .jpg 格式保存結果圖像
最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪
SVG
向量圖
無論放大多少倍清晰度不變
支持事件處理器
最適合帶有大型渲染區域的應用程序（比如google地圖）
複雜度高會減慢渲染速度（任何過度使用DOM 的應用都不快）
不適合遊戲應用
