canvas画板
1.只有画线功能的画板
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #canvas{ border:2px dashed #0000FF;} </style> </head> <body onkeydown="test()"> <canvas width="600" height="400" id="canvas"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.lineWidth = 3; ctx.strokeStyle = "red"; var paint = 0; canvas.onmousedown = function(e){ var mouseX = e.pageX - this.offsetLeft; var mouseY = e.pageY - this.offsetTop; paint = 1; ctx.moveTo(mouseX,mouseY); } canvas.onmouseup = function(e){ paint = 0; } canvas.onmousemove = function(e){ var mouseX = e.pageX - this.offsetLeft; var mouseY = e.pageY - this.offsetTop; if(paint){ ctx.lineTo(mouseX,mouseY); ctx.stroke(); } } </script> </body> </html>
效果图