编程 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实现进度条的两种姿势详解

Mar 21 HTML / CSS

CSS3中伪元素::before和::after的用法示例

Sep 18 HTML / CSS

CSS3 真的会替代 SCSS 吗

Mar 09 HTML / CSS

Html5中的桌面通知Notification的实现

Sep 25 HTML / CSS

Html5 实现微信分享及自定义内容的流程

Aug 20 HTML / CSS

HTML5标签大全

Nov 23 HTML / CSS

mui几种页面跳转方式对比总结概括

Aug 18 HTML / CSS

HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例

Aug 18 HTML / CSS

html5唤起app的方法

Nov 30 HTML / CSS

Html5 APP中监听返回事件处理的方法示例

Mar 15 HTML / CSS

详解通过focusout事件解决IOS键盘收起时界面不归位的问题

Jul 18 HTML / CSS

使用CSS设置滚动条样式

Jan 18 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提取身份证号码中的生日日期以及验证是否为成年人的函数

2015/09/29 PHP

php无法连接mysql数据库的正确解决方法

2016/07/01 PHP

JQuery实现简单时尚快捷的气泡提示插件

2012/12/20 Javascript

Jquery 例外被抛出且未被接住原因介绍

2013/09/04 Javascript

动态读取JSON解析键值对的方法

2014/06/03 Javascript

jQuery插件分享之分页插件jqPagination

2014/06/06 Javascript

jquery获得同源iframe内body下标签的值的方法

2014/09/25 Javascript

js实现简单秒表走动的时钟特效

2020/03/25 Javascript

JS简单模拟触发按钮点击功能的方法

2015/11/30 Javascript

Bootstrap中CSS的使用方法

2016/02/17 Javascript

浅析Bootstrap表格的使用

2016/06/23 Javascript

JS正则表达式之非捕获分组用法实例分析

2016/12/28 Javascript

浅谈JavaScript中promise的使用

2017/01/11 Javascript

JS表单数据验证的正则表达式(常用)

2017/02/18 Javascript

JS仿淘宝搜索框用户输入事件的实现

2017/06/19 Javascript

微信小程序 POST请求的实例详解

2017/09/29 Javascript

webpack构建换肤功能的思路详解

2017/11/27 Javascript

微信小程序支付功能 php后台对接完整代码分享

2018/06/12 Javascript

基于Taro的微信小程序模板消息-获取formId功能模块封装实践

2019/07/15 Javascript

BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑

2019/09/05 Javascript

vue全局使用axios的操作

2020/09/08 Javascript

Python实现统计给定字符串中重复模式最高子串功能示例

2018/05/16 Python

python 生成图形验证码的方法示例

2018/11/11 Python

值得收藏的10道python 面试题

2019/04/15 Python

selenium+Chrome滑动验证码破解二(某某网站)

2019/12/17 Python

Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解

2020/02/10 Python

python+requests接口压力测试500次,查看响应时间的实例

2020/04/30 Python

Python lxml库的简单介绍及基本使用讲解

2020/12/22 Python

用纯css3和html制作泡沫对话框实现代码

2013/03/21 HTML / CSS

受外贸欢迎的美国主机：BlueHost

2017/05/16 全球购物

什么是View State？

2013/01/27 面试题

主管会计岗位责任制

2014/02/10 职场文书

给女朋友的道歉短信

2015/05/12 职场文书

未婚证明范本

2015/06/15 职场文书

幼儿园秋季开学通知

2015/07/16 职场文书

Python识别花卉种类鉴定网络热门植物并自动整理分类

2022/04/08 Python