企业400电话
微网小程序
AI电话机器人
电商代运营
全 部 栏 目
企业400电话
网络优化推广
AI电话机器人
呼叫中心
网站建设
商标✡知产
微网小程序
电商运营
彩铃•短信
增值拓展业务
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>
提示:您可以先修改部分代码再运行
上一篇:
整理的15个非常有用的 HTML5 开发教程和速查手册
下一篇:
Html5新标签解释及用法
相关文章
html5 canvas 简单画板实现代码
效果图: 注:下面的代码运行效果,请在支持html5浏览下执行,才能看到效果。 !doctype html html head titlecanvas简单画板/title style type=\"text/css\" #can{ width:600px; height:500px; border:1px solid #ccc; marhtml5,canvas,简单,画板,实现,...
17家注销地理标志专用标志使用注册登记企业名单公布
来源:国家知识产权局政务微信 第三七七号 根据国务院《关于国务院机构改革涉及行...
电销卡办多有影响吗(办电销卡有什么影响)
本文目录一览:1、手机卡办多了有影响吗2、我们公司想用我的身份证办电话卡,办五张...
济宁电销机器人电话(智能语音电销机器人平台)
今天给各位共享济宁电销机器人电话的常识,其间也会对智能语音电销机器人渠道进行...
400电话办理流程非常简单
企业400电话办理非常重要,企业也是清楚知道,特别是企业已经申请400电话办理,深刻...
智能电销机器人热搜榜(智能电销机器人 资讯智能电销
本文目录一览: 1、选择智能电话机器人的话,哪家的比较好?2、有谁用过电销机器人...
前11个月山东服务外包快速发展
1-11月份,全省登记承接服务外包合同3696份,合同金额7.2亿美元,执行金额4.7亿美元,...
保护听力 畅听未来
在我们的五官当中,要数耳朵的健康是最容易被忽视的了。尤其是大部分的青年人都不...
400电话代理商有哪些400电话专业代理、服务把关?
文章来自北-京-信-通(,15358521011)!400电话是一种主被叫分摊付费业务,即400话费由企业...
五家渠防封电销卡(五家渠防封电销卡在哪办理)
今日给各位共享五家渠防封电销卡的常识,其间也会对五家渠防封电销卡在哪处理进行...
嘉兴稳定电话营销线路办理公司,电销机器人供应商-有效
嘉兴稳定电话营销线路办理公司,电销机器人供应商支持,联通,电信三大运营商;支持...
温州教育电话营销线路批发,电话营销系统-服务周到!
温州教育电话营销线路批发,电话营销系统等等,您的企业目前的规模更适合这一方案...
电销机器人有哪些功能,怎样选择?
电销机器人有ASR、NLP、多轮对话、知识库、兜底话术、实时打断等功能;在选择时可以...
400电话功能大全400电话怎么样?需要具备哪些功能?
总机功能:总机功能是公司在运营商处打开的功能。 当您打开400电话时,您不使用40...
怎么申请400电话400电话怎么申请(怎么样申请400电话号码
怎么申请400电话400电话怎么申请(怎么样申请400电话号码) 400电话,又称全国统一客服...
400是免费的电话吗打400电话是免费还是收费
400是免费的电话吗打400电话是免费还是收费以下内容由巨人小编整理发布。 400电话并不...
html5 canvas 简单画板实现代码
效果图: 注:下面的代码运行效果,请在支持html5浏览下执行,才能看到效果。 !doctype html html head titlecanvas简单画板/title style type=\"text/css\" #can{ width:600px; height:500px; border:1px solid #ccc; marhtml5,canvas,简单,画板,实现,...
咨 询 客 服