编程 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 transform 属性来变换背景图的方法

May 07 HTML / CSS

CSS3 简单又实用的5个属性

Mar 04 HTML / CSS

简单介绍CSS3中Media Query的使用

Jul 07 HTML / CSS

实例讲解CSS3中Transform的perspective属性的用法

Apr 22 HTML / CSS

CSS3 清除浮动的方法示例

Jun 01 HTML / CSS

CSS3 实现footer 固定在底部(无论页面多高始终在底部)

Oct 15 HTML / CSS

HTML5 Canvas实现玫瑰曲线和心形图案的代码实例

Apr 10 HTML / CSS

html5指南-5.使用web storage存储键值对的数据

Jan 07 HTML / CSS

HTML最新标准HTML5总结(必看)

Jun 13 HTML / CSS

html5 canvas实现给图片添加平铺水印

Aug 20 HTML / CSS

web字体加载方案优化小结

Nov 29 HTML / CSS

新的CSS 伪类函数 :is() 和 :where()示例详解

Aug 05 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

PHP去除空数组且数组键名重置的讲解

2019/02/28 PHP

JQuery 解析多维的Json数据格式

2009/11/02 Javascript

jquery实现带二级菜单的导航示例

2014/04/28 Javascript

Nodejs实现的一个简单udp广播服务器、客户端

2014/09/25 NodeJs

JS实现点击文字对应DIV层不停闪动效果的方法

2015/03/02 Javascript

JQuery实现超链接鼠标提示效果的方法

2015/06/10 Javascript

JS实现可调整倒计时间代码分享

2015/08/18 Javascript

jquery实现平滑的二级下拉菜单效果

2015/08/26 Javascript

过期软件破解办法实例详解

2017/01/04 Javascript

JavaScript实现的浏览器下载文件的方法

2017/08/09 Javascript

vue中使用localstorage来存储页面信息

2017/11/04 Javascript

关于Angularjs中跨域设置白名单问题

2018/04/17 Javascript

vue使用ElementUI时导航栏默认展开功能的实现

2018/07/04 Javascript

详解使用VUE搭建后台管理系统(vue-cli更新至3.0)

2018/08/22 Javascript

Node.js + express实现上传大文件的方法分析【图片、文本文件】

2019/03/14 Javascript

d3.js实现图形缩放平移

2019/12/19 Javascript

Vue实现手机扫描二维码预览页面效果

2020/05/28 Javascript

谈一谈vue请求数据放在created好还是mounted里好

2020/07/27 Javascript

简单介绍Python中的RSS处理

2015/04/13 Python

Python读取Excel表格,并同时画折线图和柱状图的方法

2018/10/14 Python

python 一个figure上显示多个图像的实例

2019/07/08 Python

python爬虫 Pyppeteer使用方法解析

2019/09/28 Python

python super函数使用方法详解

2020/02/14 Python

python目标检测给图画框,bbox画到图上并保存案例

2020/03/10 Python

Python中BeautifulSoup通过查找Id获取元素信息

2020/12/07 Python

Trip.com澳大利亚：在线旅行社

2019/12/01 全球购物

网上常见的一份Linux面试题(多项选择部分)

2015/02/07 面试题

掌上明珠Java程序员面试总结

2016/02/23 面试题

竞选班干部的演讲稿

2014/04/24 职场文书

总经理人事任命书

2014/06/05 职场文书

个人遵守党的政治纪律情况对照检查材料思想汇报

2014/09/25 职场文书

2014年小学生迎国庆65周年演讲稿

2014/09/27 职场文书

思想品德评语大全

2014/12/31 职场文书

雷锋的故事观后感

2015/06/10 职场文书

php TP5框架生成二维码链接

2021/04/01 PHP

原生JS中应该禁止出现的写法

2021/05/05 Javascript