编程 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实现自定义滚动条代码分享

Aug 18 HTML / CSS

CSS3 选择器属性选择器介绍

Jan 21 HTML / CSS

利用纯css3实现的文字亮光特效的代码演示

Nov 27 HTML / CSS

使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题

Jun 28 HTML / CSS

如何在网站上添加谷歌定位信息

Apr 16 HTML / CSS

HTML5是否真的可以取代Flash

Feb 10 HTML / CSS

HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注

Jan 31 HTML / CSS

HTML5实现一个能够移动的小坦克示例代码

Sep 02 HTML / CSS

HTML5+WebSocket实现多文件同时上传的实例

Dec 29 HTML / CSS

Canvas制作旋转的太极的示例

Mar 09 HTML / CSS

html5拖拽应用记录及注意点

May 27 HTML / CSS

canvas版人体时钟的实现示例

Jan 29 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扩展函数

2006/10/09 PHP

使用PHP备份MySQL和网站发送到邮箱实例代码

2013/11/28 PHP

简单谈谈favicon

2015/06/10 PHP

Yii视图CGridView实现操作按钮定义地址示例

2016/07/14 PHP

Django中通过定时任务触发页面静态化的处理方式

2018/08/29 PHP

ThinkPHP框架下微信支付功能总结踩坑笔记

2019/04/10 PHP

php文件包含的几种方式总结

2019/09/19 PHP

PHP笛卡尔积实现原理及代码实例

2020/12/09 PHP

Avengerls vs KG BO3 第一场2.18

2021/03/10 DOTA

firefox中用javascript实现鼠标位置的定位

2007/06/17 Javascript

javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox

2008/08/05 Javascript

jquery更换文章内容与改变字体大小代码

2013/09/30 Javascript

js自动生成对象的属性示例代码

2013/10/28 Javascript

js实现点击添加一个input节点

2014/12/05 Javascript

js验证上传图片的方法

2015/05/12 Javascript

javascript实现checkbox复选框实例代码

2016/01/10 Javascript

使用JQuery实现智能表单验证功能

2016/03/08 Javascript

移动端横屏的JS代码(beta)

2016/05/16 Javascript

jQuery使用JSONP实现跨域获取数据的三种方法详解

2017/05/04 jQuery

原生JS与jQuery编写简单选项卡

2017/10/30 jQuery

javascript匿名函数中的'return function()'作用

2018/10/15 Javascript

vue-cli3访问public文件夹静态资源报错的解决方式

2020/09/02 Javascript

Python常用的文件及文件路径、目录操作方法汇总介绍

2015/05/21 Python

Python统计python文件中代码,注释及空白对应的行数示例【测试可用】

2018/07/25 Python

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

2019/07/08 Python

python Qt5实现窗体跟踪鼠标移动

2019/12/13 Python

使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式

2020/01/08 Python

pytorch如何冻结某层参数的实现

2020/01/10 Python

卸载tensorflow-cpu重装tensorflow-gpu操作

2020/06/23 Python

matplotlib 多个图像共用一个colorbar的实现示例

2020/09/10 Python

如何用Python绘制3D柱形图

2020/09/16 Python

使用Python+Appuim 清理微信的方法

2021/01/26 Python

党的群众路线教育实践活动宣传方案

2014/02/23 职场文书

请假条怎么写

2014/04/10 职场文书

2014年教师党员公开承诺书

2014/05/28 职场文书

社区志愿者活动总结

2014/06/26 职场文书