编程 HTML / CSS

html5 canvas 简单画板实现代码

Posted in HTML / CSS onJanuary 05, 2012

效果图：
html5 canvas 简单画板实现代码
注：下面的代码运行效果，请在支持html5浏览下执行，才能看到效果。

<!doctype html> <html> <head> <title>canvas简单画板</title> <style type="text/css"> #can{ width:600px; height:500px; border:1px solid #ccc; margin-top:0px; margin-left:20px;} </style> </head> <body> <h2 style="padding-left:20px">canvas简单画板</h2> <canvas id="can" width="600" height="500"></canvas> <script type="text/javascript"> function getBodyOffsetTop(el){ var top = 0; do{ top = top + el.offsetTop; }while(el = el.offsetParent); return top; } function getBodyOffsetLeft(el){ var left = 0; do{ left = left + el.offsetLeft; }while(el = el.offsetParent); return left; } function Drawing(canvas,options){ typeof canvas == 'string' && (canvas = document.getElementById(canvas)); if(!canvas || !canvas.getContext){ throw new Error(100,'do not support canvas!'); } this.option = { colors:['#000000','#ff0000','#00ff00','#0000ff','#00ffff','#7fef02','#4488bb'] }; this.setOption(options); this.init(canvas); } Drawing.prototype = { setOption:function(options){ typeof options == 'object' || (options = {}); for(var i in options){ switch(i){ case 'colors': this.option[i] = options[i]; break; } } }, init:function(canvas){ this.canvas = canvas; this.context = canvas.getContext('2d'); this.context.lineWidth = 1; this.context.lineJons = 'round'; this.context.lineCep = 'round'; this.isButtonDown = false; this.historyStroker = []; this.curStroker = {color:'#000000',path:[]}; this.lastX = 0; this.lastY = 0; this.curColor = '#000000'; this.toolbarspos ={}; this.bindEvent(); this.ResetDrawToolbar(); }, bindEvent:function(){ var self = this; this.canvas.addEventListener('mousemove',function(event){ var x = event.pageX-getBodyOffsetLeft(this), y = event.pageY-getBodyOffsetTop(this); self.onMouseMove({x:x,y:y}); },false); this.canvas.addEventListener('mousedown',function(event){ var x = event.pageX-getBodyOffsetLeft(this), y = event.pageY-getBodyOffsetTop(this); self.onMouseDown(event,{x:x,y:y}); },false); this.canvas.addEventListener('mouseup',function(event){ var x = event.pageX-getBodyOffsetLeft(this), y = event.pageY-getBodyOffsetTop(this); self.onMouseUp(event,{x:x,y:y}); },false); this.canvas.addEventListener('click',function(event){ var x = event.pageX-getBodyOffsetLeft(this), y = event.pageY-getBodyOffsetTop(this); self.onClick({x:x,y:y}); },false); }, onMouseMove:function(pos){ if(this.isButtonDown){ var p = this.toolbarspos; for(var i in p){ if(pos.x >= p[i].x && pos.x <= p[i].x+p[i].w && pos.y >= p[i].y && pos.y <= p[i].y+p[i].h){ return; } } this.context.lineTo(pos.x,pos.y); this.context.stroke(); this.lastX = pos.x; this.lastY = pos.y; this.curStroker.path.push(pos); } }, onMouseDown:function(event,pos){ if(event.button == 0){ var p = this.toolbarspos; for(var i in p){ if(pos.x >= p[i].x && pos.x <= p[i].x+p[i].w && pos.y >= p[i].y && pos.y <= p[i].y+p[i].h){ return; } } this.isButtonDown = true; this.lastX = pos.x; this.lastY = pos.y; this.context.beginPath(); this.context.moveTo(this.lastX,this.lastY); this.curStroker.color = this.curColor; this.curStroker.path.push(pos); } }, onMouseUp:function(event,pos){ if(event.button == 0){ var p = this.toolbarspos; for(var i in p){ if(pos.x >= p[i].x && pos.x <= p[i].x+p[i].w && pos.y >= p[i].y && pos.y <= p[i].y+p[i].h){ return; } } this.isButtonDown = false; this.historyStroker.push(this.curStroker); this.curStroker = {color:this.curColor,path:[]}; } }, ResetDrawAll:function(){ this.context.clearRect(0,0,500,500); this.ResetDrawCentre(); this.ResetDrawToolbar(); }, ResetDrawCentre:function(){ var p = this.historyStroker,p2, curColor = this.context.strokeStyle; for(var i=0; i< p.length;i++){ this.context.strokeStyle = p[i].color; this.context.beginPath(); for(var t=0; t<p[i].path.length;t++){ p2 = p[i].path[t]; if(t==0) this.context.moveTo(p2.x,p2.y); this.context.lineTo(p2.x,p2.y); this.context.stroke(); } this.context.beginPath(); } this.context.strokeStyle = curColor; }, ResetDrawToolbar:function(){ var curcolor = this.context.fillStyle; for(var i=0; i<this.option.colors.length;i++){ this.context.fillStyle = this.option.colors[i]; if(this.curColor == this.context.fillStyle){ this.context.fillRect(i*35+5,2,30,20); this.toolbarspos[i] ={x:i*35+5,y:2,w:30,h:20}; }else{ this.context.fillRect(i*35+5,5,30,20); this.toolbarspos[i] = {x:i*35+5,y:5,w:30,h:20}; } this.context.stroke(); } this.context.fillStyle = curcolor; }, onClick:function(pos){ var p = this.toolbarspos; for(var i in p){ if(pos.x >= p[i].x && pos.x <= p[i].x+p[i].w && pos.y >= p[i].y && pos.y <= p[i].y+p[i].h){ this.curColor = this.option.colors[i]; this.context.strokeStyle = this.curColor; this.ResetDrawAll(); } } } }; new Drawing('can'); </script></body> </html>

提示：您可以先修改部分代码再运行

html5 canvas 简单画板实现代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

CSS3中HSL和HSLA的简单使用示例

Jul 14 HTML / CSS

CSS3制作炫酷的下拉菜单及弹起式选单的实例分享

May 17 HTML / CSS

利用纯CSS3实现tab选项卡切换示例代码

Sep 21 HTML / CSS

浅析CSS3中鲜为人知的属性：-webkit-tap-highlight-color

Jan 12 HTML / CSS

CSS3 Flex 弹性布局实例代码详解

Nov 01 HTML / CSS

CSS3关于z-index不生效问题的解决

Feb 19 HTML / CSS

整理的15个非常有用的 HTML5 开发教程和速查手册

Oct 18 HTML / CSS

HTML5 自动聚焦(autofocus)属性使用介绍

Aug 07 HTML / CSS

HTML5本地数据库基础操作详解

Apr 26 HTML / CSS

HTML5 localStorage使用总结

Feb 22 HTML / CSS

Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能（附转换公式）

Mar 18 HTML / CSS

AmazeUI 折叠面板的实现代码

Aug 17 HTML / CSS

整理的15个非常有用的 HTML5 开发教程和速查手册

Oct 18 #HTML / CSS

HTML5 实战PHP之Web页面表单设计

Oct 09 #HTML / CSS

HTML5标签小集

Aug 02 #HTML / CSS

HTML5的革新结构之美

Jun 20 #HTML / CSS

HTML5 声明兼容IE的写法

May 16 #HTML / CSS

基于HTML5 audio元素播放声音jQuery小插件

May 11 #HTML / CSS

20佳惊艳的HTML5应用程序示例分享

May 03 #HTML / CSS

You might like

业余方法DIY电子管FM收音机

2021/03/02 无线电

PHP取整数函数常用的四种方法小结

2012/07/05 PHP

如何利用php array_multisort函数对数据库结果进行复杂排序

2013/06/08 PHP

php一些错误处理的方法与技巧总结

2013/08/10 PHP

PHP中auto_prepend_file与auto_append_file用法实例分析

2014/09/22 PHP

php简单生成随机数的方法

2015/07/30 PHP

php项目中类的自动加载实例讲解

2019/09/12 PHP

javascript中检测变量的类型的代码

2010/12/28 Javascript

js中apply方法的使用详细解析

2013/11/04 Javascript

js获取当前页面的url网址信息

2014/06/12 Javascript

基于jQuery实现动态数字展示效果

2015/08/12 Javascript

jQuery插件 Jqplot图表实例

2016/06/18 Javascript

AngularJS $injector 依赖注入详解

2016/09/14 Javascript

vue2.0开发实践总结之入门篇

2016/12/06 Javascript

jquery实现文字单行横移或翻转（上下、左右跳转）

2017/01/08 Javascript

原生JS实现图片翻书效果

2017/02/16 Javascript

JS实现的tab切换选项卡效果示例

2017/02/28 Javascript

(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看

2018/01/08 jQuery

详解Vue内部怎样处理props选项的多种写法

2018/11/06 Javascript

JS实现网页烟花动画效果

2020/03/10 Javascript

在实例中重学JavaScript事件循环

2020/12/03 Javascript

[02:46]解说DC：感谢430陪伴我们的DOTA2国际邀请赛岁月

2016/06/29 DOTA

python模块之sys模块和序列化模块(实例讲解)

2017/09/13 Python

Python Pandas数据中对时间的操作

2019/07/30 Python

python-docx文件定位读取过程(尝试替换)

2020/02/13 Python

python由已知数组快速生成新数组的方法

2020/04/08 Python

如何处理简单的PHP错误

2015/10/14 面试题

翻译学院毕业生自荐书

2014/02/02 职场文书

《藤野先生》教学反思

2014/02/19 职场文书

我与祖国共奋进演讲稿

2014/09/13 职场文书

学生不讲诚信检讨书

2014/09/29 职场文书

车间质检员岗位职责

2015/04/08 职场文书

2015年宣传工作总结

2015/04/08 职场文书

毕业生的自我鉴定表范文

2019/05/16 职场文书

mysql 如何获取两个集合的交集/差集/并集

2021/06/08 MySQL

SpringAop日志找不到方法的处理

2021/06/21 Java/Android