HTML5 canvas 做画板画图 可以做电子白板<html><head><meta charset="utf-8"><title>HTML5 canvas 做画板画图 可以做电子白板</title><style type="text/css"><!–#container { position: relative;}#imageView { border: 1px solid #000; }–></style> </head> <body><div id="container"><canvas id="imageView" width="800" height="500"></canvas></div><script type="text/javascript">var canvas;var context;var tool;/** * called on window load. */if(window.addEventListener){window.addEventListener('load',init(),false);}/** * init. */function init(){/*** find the canvas element.*/canvas = document.getElementById('imageView');if(!canvas){return;}if(!canvas.getContext){return;}/*** get the 2D canvas context.*/context = canvas.getContext('2d');if(!context){return;}/*** pencil tool instance.*/tool = new tool_pencil();/*** attach the mousedown, mousemove and mouseup event listeners.*/canvas.addEventListener('mousedown', ev_canvas, false);canvas.addEventListener('mousemove', ev_canvas, false);canvas.addEventListener('mouseup', ev_canvas, false);}/** * This painting tool * works like a drawing pencil * which tracks the mouse movements. * * @returns {tool_pencil} */function tool_pencil(){var tool = this;this.started = false;/*** This is called when you start holding down the mouse button.* This starts the pencil drawing.*/this.mousedown = function (ev){/*** when you click on the canvas and drag your mouse* the cursor will changes to a text-selection cursor* the "ev.preventDefault()" can prevent this.*/ev.preventDefault();context.beginPath();context.moveTo(ev._x,ev._y);tool.started = true;};/*** This is called every time you move the mouse.* Obviously, it only draws if the tool.started state is set to true*/this.mousemove = function (ev){if(tool.started){context.lineTo(ev._x,ev._y);context.stroke();}};/*** This is called when you release the mouse button.*/this.mouseup = function (ev) {if(tool.started){tool.mousemove(ev);tool.started = false;}};}/** * general-purpose event handler. * determines the mouse position relative to the canvas element. * * @param ev */function ev_canvas(ev){var x,y;if(ev.offsetX || ev.offsetY == 0){ev._x = ev.offsetX;ev._y = ev.offsetY;}/*** call the event handler of the tool.*/var func = tool[ev.type];if (func) {func(ev);}}</script> </body></html>效果图：
，没有伞的孩子必须努力奔跑!
