效果如下：http://hovertree.com/texiao/html5/16/
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas繪制圖像入門示例 - 何問起</title>
</head>
<body>
<!-- 添加canvas標簽，並加上紅色邊框以便於在頁面上查看 -->
<canvas id="myCanvas" width="734" height="432" style="border: 1px solid red;">
您的浏覽器不支持canvas標簽。
</canvas>
<script type="text/javascript">
//獲取Canvas對象(畫布)
var canvas = document.getElementById("myCanvas");
//簡單地檢測當前浏覽器是否支持Canvas對象，以免在一些不支持html5的浏覽器中提示語法錯誤
if(canvas.getContext){
//獲取對應的CanvasRenderingContext2D對象(畫筆)
var ctx = canvas.getContext("2d");
//創建新的圖片對象
var img = new Image();
//指定圖片的URL
img.src = "http://hovertree.com/hvtimg/201601/p3t2ldyr.png";
//浏覽器加載圖片完畢後再繪制圖片
img.onload = function(){
//以Canvas畫布上的坐標(10,10)為起始點，繪制圖像
ctx.drawImage(img, 10, 10);
};
}
</script>
</body>
</html>