编程 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垂直手风琴菜单

Jun 28 HTML / CSS

CSS3属性使网站设计增强同时不消弱可用性

Aug 29 HTML / CSS

纯css3无js实现的Android Logo(有简单动画)

Jan 21 HTML / CSS

css3打造一款漂亮的卡哇伊按钮

Mar 20 HTML / CSS

CSS3 实现雷达扫描图的示例代码

Sep 21 HTML / CSS

CSS3 对过渡(transition)进行调速以及延时

Oct 21 HTML / CSS

HTML5仿手机微信聊天界面

Mar 18 HTML / CSS

HTML5 的新的表单元素(datalist/keygen/output)使用介绍

Jul 19 HTML / CSS

HTML5和以前HTML4的区别整理

Oct 20 HTML / CSS

使用HTML5进行SVG矢量图形绘制的入门教程

Feb 19 HTML / CSS

HTML5超文本标记语言的实现方法

Sep 24 HTML / CSS

面试必问:圣杯布局和双飞翼布局的区别

May 13 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

在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析

2016/03/06 PHP

javascript当中的代码嗅探扩展原生对象和原型(prototype)

2013/01/11 Javascript

JS远程获取网页源代码实例

2013/09/05 Javascript

鼠标拖拽移动子窗体的JS实现

2014/02/25 Javascript

验证码在IE中不刷新而谷歌等浏览器正常的解决方案

2014/03/18 Javascript

node.js中的fs.openSync方法使用说明

2014/12/17 Javascript

jQuery中:nth-child选择器用法实例

2014/12/31 Javascript

JavaScript检测弹出窗口是否已经关闭的方法

2015/03/24 Javascript

原生js和jquery实现图片轮播特效

2015/04/23 Javascript

jQuery实现类似标签风格的导航菜单效果代码

2015/08/25 Javascript

javascript实现下拉提示选择框

2015/12/29 Javascript

基于React.js实现原生js拖拽效果引发的思考

2016/03/30 Javascript

JavaScript 数组some()和filter()的用法及区别

2016/05/20 Javascript

node.js操作mysql简单实例

2017/05/25 Javascript

jquery+css实现简单的图片轮播效果

2017/08/07 jQuery

javascript面向对象三大特征之继承实例详解

2019/07/24 Javascript

[08:44]DOTA2发布会群星聚首我们都是刀塔人

2014/03/21 DOTA

[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场

2018/08/20 DOTA

python删除特定文件的方法

2015/07/30 Python

Python画图学习入门教程

2016/07/01 Python

Python import与from import使用及区别介绍

2018/09/06 Python

Python File(文件) 方法整理

2019/02/18 Python

python使用Plotly绘图工具绘制水平条形图

2020/03/25 Python

django中forms组件的使用与注意

2019/07/08 Python

canvas如何绘制钟表的方法

2017/12/13 HTML / CSS

英国领先的办公用品供应商：Viking

2016/08/01 全球购物

英国品牌男装折扣网站：Brown Bag

2018/03/08 全球购物

澳大利亚人信任的清洁平台，您的私人管家：Jarvis

2020/12/25 全球购物

C#如何调用Windows程序打开一个文档

2014/12/26 面试题

Ruby如何进行文件操作

2014/07/17 面试题

婚礼答谢宴主持词

2014/03/14 职场文书

团日活动总结

2014/04/28 职场文书

解除聘用合同证明书范本

2014/09/11 职场文书

2014年置业顾问工作总结

2014/11/17 职场文书

干部考察材料范文

2014/12/24 职场文书

创新创业项目计划书该怎样写？

2019/08/13 职场文书