当前位置：主页 > 查看内容

html5 canvas 简单画板实现代码

发布时间：2021-09-29 00:00| 有位朋友查看

简介：效果图：注：下面的代码运行效果，请在支持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;} /sty……

效果图：

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

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

原文链接：https://m.jb51.net/html5/41052.html
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！

上一篇：Html5新标签解释及用法 下一篇：没有了

随机推荐

DreamWeaver操作技巧大全(16条技能)

原本由Macromedia公司所开发的著名网站开发工具。它使用所见即所得的接口，亦有H...
才买的域名需要实名吗

才买的域名需要实名吗？答案是肯定的。不管域名是刚刚注册的，还是通过别人买...
Dreamweaver怎么避免中文乱码的问题?

Dreamweaver设计网页的时候，会遇到出现乱码的情况，该怎么预防Dreamweaver中出...
Q4OS 4.0 测试版本发布基于 Debian 的桌

Q4OS 4.0 测试版本发布了，这是代号为“Gemini” 的?4.0 主要版本开发周期的开始...
k8s 部署 skywalking 并将 pod 应用接入

一、概述前面写了两篇文章介绍使用 docker 部署 spring boot 和 tomcat 项目，...
css等比例分割父级容器（完美三等分）的

父级容器的宽度一定，要实现子元素等比例完美均分父级宽度，实现方式有哪些？ ht...
网页里的两种盒子模型(W3C盒子模型、IE盒

网页盒子模型存在两种： 1：标准W3C盒子模型； 2：IE盒子模型（IE浏览器默认的模...
Wakeup in XNU

本文作者：段家顺苹果在iOS13的时候，在内核中加入了一个新的性能衡量指标 wak...
10条影响CSS渲染速度的写法与使用建议第1

这篇文章主要写的提高网页在客户端浏览器的渲染速度的CSS部分，暂时总结了10条。...
听Najeeb Khan 讲述关于Council.club的一

本质上，所有的企业家都是解决问题的人。面对全球市场上无数需要解决的问题或需...

html5 canvas 简单画板实现代码

推荐图文

中国信通院金键：区块链将驱动工业互联网发挥更大效

中国信通院推出复工直通车 ——助力复工复产的新型

前端css实现最基本的时间轴的示例代码

HTML5中的Web Notification桌面通知功能的实现方法

HTML5实践-图片设置成灰度图

流动的观察者模式 | Flutter 设计模式

随机推荐

DreamWeaver操作技巧大全(16条技能)

才买的域名需要实名吗

Dreamweaver怎么避免中文乱码的问题?

Q4OS 4.0 测试版本发布基于 Debian 的桌

k8s 部署 skywalking 并将 pod 应用接入

css等比例分割父级容器（完美三等分）的

网页里的两种盒子模型(W3C盒子模型、IE盒

Wakeup in XNU

10条影响CSS渲染速度的写法与使用建议第1

听Najeeb Khan 讲述关于Council.club的一

关于我们