html5 canvas 简单画板实现代码

发布时间：2012-01-05 10:45:15 作者：佚名

canvas简单画板，花了几个小时搞定的简单玩意，目前只是初步demo，有时间在完善一下

效果图：

注：下面的代码运行效果，请在支持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>

提示：您可以先修改部分代码再运行

Tag：Canvas HTML5

HTML5使用details标签：展开/收缩信息
最近看一些技术网站发现了details 标签的妙用，这个不用js即可实现展开/收缩信息，很方便用来让用户先才答案，然后下面点击再给出答案的效果，这里就为大家简单介绍一下，
2024-11-03
HTML5 details标签的基础知识
本文介绍了HTML中的details标签，包括其在实例中的应用，浏览器的支持情况，定义与用法,此标签在HTML5中新增，用于描述文档或文档部分的细节,默认情况下，详情是隐藏的，用
2024-11-03
使用HTML5新增的表单元素来增强表单功能
HTML5标准的推广极大改进了网页表单设计,引入新的表单控件和属性,提升用户体验,简化前端开发,本文详细介绍HTML5新增表单元素,展示如何利用这些元素增强表单功能,如数据验证
2024-10-22
html5浏览器中实现高德地图定位功能(推荐)
本文介绍如何在HTML5页面中使用高德地图API实现地图定位功能,首先需要在HTML中引入高德地图API,然后创建一个地图容器,还可以通过点击地图来手动更新位置,这一过程不仅适用
2024-10-21
详解HTML5元素定位
在HTML5中,元素定位是通过设置position属性实现的,相对定位基于元素自身位置调整,绝对定位以最近的已定位父元素为参考,固定定位则相对于浏览器窗口固定位置,z-index属性可
2024-10-21
HTML5实现本地摄像头拍照与照片上传的方法
本文详细介绍了如何使用HTML5和JavaScript构建调用本地摄像头拍照并上传照片的网页应用,内容涵盖从实现摄像头功能,提供了一套完整的操作指南和技术路线,使读者能够在实际项
2024-10-21
HTML5中Checkbox标签详解
本文详细介绍了Checkbox的基础属性、样式自定义及其应用场景,Checkbox通过<input>元素实现,样式自定义可以通过隐藏原始Checkbox、使用伪元素、JavaScript来实现,Chec
2024-10-16
HTML5表单的自动验证、取消验证、自定义错误信息的操作
本文介绍了HTML5中表单的自动验证、取消验证、自定义错误信息等功能,通过required、pattern、min、max和step属性,可以实现对表单输入的自动检查，novalidate和formnovalida
2024-09-23
HTML5中使用Noto Sans CJK字体的详细步骤
在HTML5项目中使用NotoSansCJK字体能提升用户体验,本文介绍了通过GoogleFonts在线加载和本地托管两种方法,在线加载无需下载,通过GoogleFonts链接快速引入，适合离线使用或
2024-09-23
Html5播放hls格式的视频示例代码
HLS是一种基于HTTP协议的流媒体传输协议，它的出现使得视频的传输更加稳定和可靠，本文给大家介绍Html5如何播放hls格式的视频，感兴趣的朋友一起看看吧
2024-08-19

html5 canvas 简单画板实现代码

相关文章

最新评论

文章分类

大家感兴趣的内容

最近更新的内容