利用簡單的繪圖指令創建一個簡單的繪製程序：
文件名：drawing1.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>繪製1</title>
<style>
#canvas{background-color: #99cc33;}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="utils.js"></script>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById('canvas'),
context = canvas.getContext("2d"),//指定繪圖API類型
mouse = utils.captureMouse(canvas);
function onMouseMove(){
context.lineTo(mouse.x,mouse.y);//線條終點
context.strokeStyle = "#f00";//設置線條顏色
context.lineWidth = 5;//設置線條寬度
context.stroke();//渲染至canvas上
}
canvas.addEventListener("mousedown" , function(){
context.beginPath();//開始繪製一條新路徑
context.moveTo(mouse.x,mouse.y);//新路徑的新起點
canvas.addEventListener("mousemove",onMouseMove,false);
},false);
canvas.addEventListener("mouseup",function(){
canvas.removeEventListener("mousemove",onMouseMove,false);
},false);
}
</script>
</body>
</html>效果圖：
參見《HTML5+Javascript動畫基礎》。