web前端|H5教程
html5,canvas
web前端-H5教程
效果图：
注：下面的代码运行效果，请在支持html5浏览下执行，才能看到效果。
可关闭的网页左上角公告源码,vscode的中文设置,ubuntu重装mysqk,php 在tomcat,sqlite在哪里创建表,适合做小程序的前端框架,php 爬虫浏览器指纹,php if post,佛山seo优化报价,智睿中小学校网站,php网页设计模板下载,会员中心网页模板lzw
点卡平台源码,ubuntu键盘乱跳,爬虫 单词释义 词频,phtyon php,大型网站 seolzw
珠宝网站源码下载,ubuntu如何创建git,爬虫微信好,php点击按钮执行php,seo推广软lzw
#can{ width:600px; height:500px; border:1px solid #ccc; margin-top:0px; margin-left:20px;}
canvas简单画板
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].y && pos.y = p[i].x && pos.x = p[i].y && pos.y = p[i].x && pos.x = 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= p[i].x && pos.x = 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);
ffcod = delpost.runcode55 .value; ffcod = ffcod.replace(/
/g,”); delpost.runcode55 .value = ffcod; 提示：您可以先修改部分代码再运行
