编程 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，js）

Dec 12 HTML / CSS

详解css3自定义滚动条样式写法

Dec 25 HTML / CSS

CSS3 translate导致字体模糊的实例代码

Aug 30 HTML / CSS

CSS3的新特性介绍

Oct 31 HTML / CSS

纯CSS3实现自定义Tooltip边框涂鸦风格的教程

Nov 05 HTML / CSS

HTML5 使用 sessionStorage 进行页面传值的方法

Jul 02 HTML / CSS

html5的画布canvas——画出弧线、旋转的图形实例代码+效果图

Jun 09 HTML / CSS

html5教程实现Photoshop渐变色效果

Dec 04 HTML / CSS

详解HTML5 Canvas绘制不规则图形时的非零环绕原则

Mar 21 HTML / CSS

html5生成柱状图(条形图)效果的实例代码

Mar 25 HTML / CSS

Html5应用程序缓存(Cache manifest)

Jun 04 HTML / CSS

从QQtabBar看css命名规范BEM的详细介绍

Aug 07 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/05/21 PHP

学习php设计模式 php实现建造者模式

2015/12/07 PHP

php如何实现不借助IDE快速定位行数或者方法定义的文件和位置

2017/01/17 PHP

php微信开发之关注事件

2018/06/14 PHP

laravel 解决ajax异步提交数据,并还回填充表格的问题

2019/10/15 PHP

zShowBox 图片放大展示jquery版兼容性

2011/09/24 Javascript

jQuery删除节点的三个方法即remove()detach()和empty()

2013/12/27 Javascript

jquery任意位置浮动固定层插件用法实例

2015/05/29 Javascript

学习JavaScript设计模式之迭代器模式

2016/01/19 Javascript

动态加载JavaScript文件的两种方法

2016/04/22 Javascript

JavaScript检测原始值、引用值、属性

2016/06/20 Javascript

jQuery on()方法绑定动态元素的点击事件无响应的解决办法

2016/07/07 Javascript

AngularJS基础 ng-non-bindable 指令详细介绍

2016/08/02 Javascript

基于jQuery ligerUI实现分页样式

2016/09/18 Javascript

Bootstrap作品展示站点实战项目2

2016/10/14 Javascript

纯jQuery实现前端分页功能

2017/03/23 jQuery

详解Vue用axios发送post请求自动set cookie

2017/05/10 Javascript

vue-cli项目中怎么使用mock数据

2017/09/27 Javascript

详解js的视频和音频采集

2018/08/09 Javascript

js中null与空字符串""的区别讲解

2019/01/17 Javascript

微信小程序使用Vant Weapp组件库的方法步骤

2019/08/01 Javascript

策略模式实现 Vue 动态表单验证的方法

2019/09/16 Javascript

VUE使用axios调用后台API接口的方法

2020/08/03 Javascript

浅谈vue.watch的触发条件是什么

2020/11/07 Javascript

JavaScript中Object、map、weakmap的区别分析

2020/12/15 Javascript

Python自动化完成tb喵币任务的操作方法

2019/10/30 Python

python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)

2020/04/08 Python

解决Keyerror ''acc'' KeyError: ''val_acc''问题

2020/06/18 Python

python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)

2020/08/11 Python

英国电器零售商：PRC Direct

2018/06/21 全球购物

C#软件工程师英语面试题

2015/06/07 面试题

个人课题方案

2014/05/08 职场文书

2015年度党员个人总结

2015/02/14 职场文书

Angular性能优化之第三方组件和懒加载技术

2021/05/10 Javascript

nginx rewrite功能使用场景分析

2022/05/30 Servers

pandas时间序列之pd.to_datetime()的实现

2022/06/16 Python