Canvas 画板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas draw</title> </head> <body> <canvas id=‘myCanvas‘ width=‘800‘ height=‘600‘> your browser does not support canvas </canvas> <script type="text/javascript"> var c = document.getElementById(‘myCanvas‘); var ctx = c.getContext(‘2d‘); ctx.fillStyle = ‘black‘; ctx.fillRect(0, 0, 800, 600); var onoff = false; var oldx = -10; var oldy = -10; var lineColor = ‘white‘; var linw = 4; c.addEventListener(‘mousemove‘, draw, true); c.addEventListener(‘mousedown‘, down, false); c.addEventListener(‘mouseup‘, up, false); function down(event) { onoff = true; oldx = event.pageX - 10; oldy = event.pageY - 10; } function up() { onoff = false; } function draw(event) { if (onoff == true) { var newx = event.pageX - 10; var newy = event.pageY - 10; ctx.beginPath(); ctx.moveTo(oldx, oldy); ctx.lineTo(newx, newy); ctx.strokeStyle = lineColor; ctx.lineWidth = linw; ctx.lineCap = ‘round‘; ctx.stroke(); oldx = newx; oldy = newy; } } </script> </body> </html>
原文：http://www.cnblogs.com/stono/p/4673326.html