html5 canvas 简单画板实现代码

2016-02-19 12:43 160 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享html5 canvas 简单画板实现代码，希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - Web开发】

效果图：

注：下面的代码运行效果，请在支持html5浏览下执行，才能看到效果。

!doctype html html head titlecanvas简单画板/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; tp[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; ithis.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

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

来源:http://www.tulaoshi.com/n/20160219/1601670.html

上一篇： html5 canvas 使用示例
下一篇：用Java实现多线程服务器程序

看过《html5 canvas 简单画板实现代码》的人还看了以下文章更多>>

html5 canvas 简单画板实现代码 02-19
html5时钟实现代码 02-19
HTML5上传文件显示进度的实现代码 02-19
基于HTML5超酷摄像头（HTML5 webcam）拍照功能实现代码 02-19
HTML5 canvas 基本语法 02-19
HTML5 Canvas概述 02-19
html5 Canvas绘制线条 closePath()实例代码 02-19
html5 兼容IE6结构的实现代码 02-19
html5 canvas-1.canvas介绍(hello canvas) 02-19
HTML5 Canvas 起步(2) - 路径 02-19

HTML5 Canvas标签使用收录

标签： Web开发

一、基本概念什么是Canvas canvas 是一个新的 HTML 元素，这个元素在 HTML5 中被定义。这个元素通常可以被用来在 HTML 页面中通过 JavaScript 进行绘制图形、合成图像等等操作，也可以用来做一些动画。当然，目前 HTML5 规范还在草稿阶段，正式发布也许要等到2010年，不...

html5 canvas 使用示例

标签： Web开发

复制代码代码如下: !DOCTYPE HTML html head meta charset="UTF-8" titleHTML5示例/title style type="text/css" #container{border:1px solid #ccc;width:800px;height:600px;position:relative;} canvas{position:absolute;top:0px;left:0px;z-index:1;} /style /head body select id="tools" option value="pen"铅笔/option op...

HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)

标签： Web开发

HTML5 Canvas中提供了实现图形平移，旋转，放缩的API。平移(translate) 平移坐标translate(x, y)意思是把(0,0)坐标平移到(x, y)，原来的(0,0)坐标则变成(-x, -y) 图示如下：任何原来的坐标点p(ox, oy)在translate之后的坐标点为p(ox-x, oy-y),其中点(x, y)为平移点坐标translate(x, y)。代码演示：代码如下： // trans...

html5 canvas 画图教程案例分析

标签： Web开发

虽然大家都称Canvas为html5的新标签，看起来好像Canvas属于html语言的新知识，但其实Canvas画图是通过javascript来做的。所以，如果你想学习Canvas画图，你必须要有Javascript基础。另外，画图嘛，总有一些图像方面的术语和知识点，所以如果你有过做图或美工经验，学习Canvas会更容易。 Canvas，意为画布也。而Html5中的Canvas也真的跟现实生...

HTML5的标签的代码的简单介绍 HTML5标签的简介

标签： Web开发

HTML是人们在万维网上沟通和交流所必须要使用的核心标记语言。最新版本的超文本标记语言HTML5已经带着新的功能和要素推出了，这里提供一些信息供您学习HTML5. HTML5 是基于HTML4.01，XHTML1.0和DOM级别2HTML的下一代推荐标准。它的目标是减少对专有RIA技术的需要，就比如Adobe Flash, MicrosoftSilverlight 和 Sun JavaFX. 这个改进H...

查看更多精彩>>