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>

效果图：

HTML5 canvas 做画板画图可以做电子白板相关推荐

html5 电子白板直播,HTML5 canvas 做画板画图可以做电子白板
HTML5 canvas 做画板画图可以做电子白板 HTML5 canvas 做画板画图可以做电子白板 var canvas; var context; var tool; /** * calle ...
用html5做一个简单的作品,html5 canvas 简单画板实现代码
canvas简单画板 canvas简单画板提示:您可以先修改部分代码再运行
超酷的HTML5 Canvas网络画板教程
在今天的HTML教程里,我们要学习一下如何使用HTML5 Canvas实现一个超酷而又简单的网络画板功能.在这个教程中,我们可以选择笔刷的类型.笔刷的大小以及笔刷的颜色,当然作为画板还需要很多功能,这 ...
canvas离线画板画图
在线效果地址离线画板画图画板代码 <html><head><title>You are not connected to the Internet</ti ...
html5 canvas 画板 demo,html5 canvas 简单画板实现代码
canvas简单画板 #can{ width:600px; height:500px; border:1px solid #ccc; margin-top:0px; margin-left:20px; ...
HTML怎么在矩形上画直线,【绘制】HTML5 Canvas 绘画画板，实现鼠标画线条，画矩形或选区（图文、示例）...
个人处女做<Canvas系列教程>在个人Github上正在连载更新,但愿能获得您的关注和支持,让我有更多的动力进行创做.html 教程介绍.教程目录等能在README里查阅.git 目录函 ...
【绘制】HTML5 Canvas 绘画画板，实现鼠标画线条，画矩形或选区（图文、示例）
我的处女作<Canvas系列教程>在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作. 教程介绍.教程目录等能在README里查阅. 传送门:https: ...
HTML5 Canvas实现web画图之自由画笔
最近需要做一个类似windows附件中的画图工具,是在web页面可以自由画图的,目前用的主要是HTML5的Canvas画布来实现该功能的. 而操作Canvas主要用的是在Google上找的一个Jque ...
HTML5 canvas实现画板功能
HTML5新标签: <canvas></canvas>定义画布,需要配合js完成功能.在canvas标签内部的内容为不支持canvas时显示的内容.行内样式width与heig ...

HTML5 canvas 做画板画图可以做电子白板

HTML5 canvas 做画板画图可以做电子白板

HTML5 canvas 做画板画图可以做电子白板相关推荐

最新文章

热门文章

HTML5 canvas 做画板画图 可以做电子白板

HTML5 canvas 做画板画图 可以做电子白板

HTML5 canvas 做画板画图 可以做电子白板相关推荐

最新文章

热门文章

HTML5 canvas 做画板画图可以做电子白板

HTML5 canvas 做画板画图可以做电子白板

HTML5 canvas 做画板画图可以做电子白板相关推荐