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频道!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值