<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas</title>
<style>
body{ background:black;}
#canvas{ background:white;}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="800"></canvas>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.onmousedown = function(e){
var e = e || window.event;
ctx.moveTo(e.clientX-canvas.offsetLeft,e.clientY-canvas.offsetTop);
document.onmousemove = function(e){
var e = e || window.event;
ctx.lineTo(e.clientX-canvas.offsetLeft,e.clientY-canvas.offsetTop);
ctx.stroke();
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
};
};
</script>
</body>
</html>
示例圖：
canvas.JPG
