javascript+html5实现在网页上画图效果

发布时间：2018-10-08 20:36:22 所属栏目：创业来源：站长网

导读：这是一个用javascript 在canvas 上实现的简朴的绘图应用，用支持html5 的赏识器便可在下面的地区举办绘画：您的赏识器不支持canvas! 成果很简朴，道理着实和拖放是相同的，首要是三个变乱： 1. 在canvas 上绑定mousedown 变乱以符号绘画的开始(挪用move

这是一个用javascript 在canvas 上实现的简朴的绘图应用，用支持html5 的赏识器便可在下面的地区举办绘画：

您的赏识器不支持canvas!

成果很简朴，道理着实和拖放是相同的，首要是三个变乱：

1. 在canvas 上绑定mousedown 变乱以符号绘画的开始(挪用moveTo 移动画笔)

2. 在document 上绑定mousemove 变乱来处理赏罚绘画时的举动(挪用lineTo 以及stroke 举办绘画)

3. 在document 上绑定mouseup 变乱以符号绘画的竣事(解绑document 上的两个变乱)

实现时需出格留意的一点是挪用moveTo 以及lineTo 要领时怎样转达正确的坐标值，这个坐标值应该是光标相对付canvas 左上角的偏移量，获取时必要把canvas 相对付当前视口的位置思量进去，getBoundingClientRect 要领例正好派上了用场(支持HTML5 的赏识器应该都实现了这个要领)，最后用event 工具的clientX, clientY 减去getBoundingClientRect 要领返回的left, top 值即可。

就这样一个简朴的鼠绘成果就完成了，不敷之处也有，好比不可以或许画点。。。我小我私人认为用canvas 来做绘图照旧较量弱的，伟大一些的成果就不太好实现了，不外各人也可以实行下哦，好比要添加个生涯图片的要领，界说Draw.prototype.save = function() {...}，个中可挪用toDataURL 要领实现。

这里有个不错的HTML5 canvas 教程可供初学者进修~

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>draw demo</title> </head> <body> <canvas id="the_stage" width="600" height="400" style="border:1px solid #999;">您的赏识器不支持canvas!</canvas> <script> function Draw(arg) { if (arg.nodeType) { this.canvas = arg; } else if (typeof arg == 'string') { this.canvas = document.getElementById(arg); } else { return; } this.init(); } Draw.prototype = { init: function() { var that = this; if (!this.canvas.getContext) { return; } this.context = this.canvas.getContext('2d'); this.canvas.onselectstart = function () { return false; //修复chrome下光标样式的题目 }; this.canvas.onmousedown = function(event) { that.drawBegin(event); }; }, drawBegin: function(e) { var that = this, stage_info = this.canvas.getBoundingClientRect(); window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //破除文本的选中 this.context.moveTo( e.clientX - stage_info.left, e.clientY - stage_info.top ); document.onmousemove = function(event) { that.drawing(event); }; document.onmouseup = this.drawEnd; }, drawing: function(e) { var stage_info = this.canvas.getBoundingClientRect(); this.context.lineTo( e.clientX - stage_info.left, e.clientY - stage_info.top ); this.context.stroke(); }, drawEnd: function() { document.onmousemove = document.onmouseup = null; } }; var draw = new Draw('the_stage'); </script> </body> </html><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：仅在IE9、Chrome和Firefox下有用!

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

首富马斯克谈成功？他	从先行者到制定者，轻
中国互联网的新一轮机	马斯克想辞职做专业网