、基本繪畫

在最基本的畫圖操作中，你需要的只是希望圖像出現處的位置(x和y坐標)。圖像的位置是相對于其左上角來判斷的。使用這種方法，圖像可以簡單的以其原尺寸被畫在畫布上。

drawImage (image, x, y)

var ctx = canvas.getContext (’2d’);ctx.drawImage (myImage, 50, 50);

ctx.drawImage (myImage, 125, 125);

ctx.drawImage (myImage, 210, 210);

縮放及調整尺寸

改變圖像的尺寸，你需要使用重載的 drawImage 函數，提供給它希望的寬度和高度參數。

drawImage (image, x, y, width, border=1 Height)

var ctx = canvas.getContext (’2d’);ctx.drawImage (myImage, 50, 50, 100, 100);

ctx.drawImage (myImage, 125, 125, 200, 50);

ctx.drawImage (myImage, 210, 210, 500, 500);

這個例子演示了如何畫一個比原圖小的圖像，一個不同長寬比的圖像和一個比原圖大的圖像的方法。

二、媒體

一個響應式的布局是實現響應網站的第一步。現在，讓我們把注意力集中在另外一個現代化網站非常重要的方面：媒體，如視頻或圖像。 下面的 CSS 代碼將確保您的圖像將永遠不會大于他們的父容器，代碼非常簡單，適用于大多數網站。請注意，IE6 等舊的瀏覽器不支持 max-width 指令。

1. img { max-width: 100%; }

雖然上述技術是有效的，有時你可能需要有更多的圖像控制權，例如根據客戶端的顯示大小，顯示不同的圖像。

這是由 Nicolas Gallagher 發明的好方法。讓我們看看 HTML：

1. <imgsrc="image.jpg"data-src-600px="image-600px.jpg"data-src-800px="image-800px.jpg"alt="">

正如你可以看到，我們使用 data-* 屬性來存儲替換圖像的 URL。現在，讓我們使用強大的 CSS3 來為匹配 min-device-width 條件的媒體指定替換圖像：

1. @media (min-device-width:600px) {

2. img[data-src-600px] {

3. content: attr(data-src-600px, url);

4. }

5. }

6.

7. @media (min-device-width:800px) {

8. img[data-src-800px] {

9. content: attr(data-src-800px, url);

10. }

11. }

三、設備訪問

對于消除Web應用與原生的應用，最大的障礙就是瀏覽器需要訪問移動設備基本特性的能力，比如說照相機，通訊錄，日歷，加速器等，利用HTML5技術可以實現此能力方面，Mozilla一直在努力通過移動瀏覽器Fennec來將強設備訪問能力。

對于許多的移動開發商而言，能夠提高設備訪問能力是HTML5最令人沸騰的時代性的革新，這完全的意味著Web應用能夠登陸移動設備，而無需再做任何的PhoneGap式打包。一般游戲開發商當然是最開心，因為某些性能特性對他們來說是封鎖的，比如能整合到游戲中的加速器。

四、離線緩存

相對而言，離線緩存算是一個比較新的概念，簡單來說就是在離線的情況下，web應用還可以正常的進行運行。傳統意義上的web技術應用需要依賴于網絡，而HTML5的離線緩存可以沖破這個束縛，利用離線緩存技術，這樣才可以在離線狀態下正常使用web應用。目前已經有產品實現了這個方式。比如亞馬遜Kindle的云閱讀器。