html5 电子白板 直播,HTML5 canvas教程 如何实现电子白板

本篇教程探讨了HTML5 canvas教程 如何实现电子白板，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

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);

}

}

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！