利用简单的绘图指令创建一个简单的绘制程序：
文件名：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动画基础》。