HTML5-Leinwand, einfache Zeichenbrett-Implementierung, Code_html5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

HTML5-Leinwand, einfache Zeichenbrett-Implementierung, Code_html5-Tutorial-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:51:13

Original

1243 Leute haben es durchsucht

Rendering:

Hinweis: Damit der folgende Code ausgeführt werden kann, führen Sie ihn bitte in einem Browser aus, der HTML5 unterstützt, um den Effekt zu sehen.

<!doctype html> 
<html> 
<Kopf> 
<title>canvas 简单画板</title> 
<style type="text/css"> 
#can{ width:600px; Höhe:500px; border:1px solid #ccc; margin-top:0px; margin-left:20px;} 
</style> 
</head> 
<Körper> 
<h2 style="padding-left:20px">canvas简单画板</h2> 
<canvas id="can" width="600" height="500"></canvas> 
<script type="text/javascript"> 
Funktion getBodyOffsetTop(el){ 
var top = 0; 
Tun{ 
top = top el.offsetTop; 
}while(el = el.offsetParent); 
zurück nach oben; 
} 
Funktion getBodyOffsetLeft(el){ 
var links = 0; 
Tun{ 
left = left el.offsetLeft; 
}while(el = el.offsetParent); 
zurück nach links; 
} 
Funktion Zeichnung(Leinwand,Optionen){ 
typeof canvas == 'string' && (canvas = document.getElementById(canvas)); 
if(!canvas || !canvas.getContext){ 
throw new Error(100,'canvas nicht unterstützen!'); 
} 
this.option = { 
Farben:['#000000','#ff0000','#00ff00','#0000ff','#00ffff','#7fef02','#4488bb'] 
}; 
this.setOption(options); 
this.init(canvas); 
} 
Drawing.prototype = { 
setOption:function(options){ 
Typ der Optionen == 'Objekt' || (Optionen = {}); 
for(var i in Optionen){ 
switch(i){ 
Gehäuse 'Farben': 
this.option[i] = Optionen[i]; 
brechen; 
} 
} 
}, 
init:function(canvas){ 
this.canvas = Leinwand; 
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}); 
},FALSCH); 
this.canvas.addEventListener('mousedown',function(event){ 
var x = event.pageX-getBodyOffsetLeft(this), 
y = event.pageY-getBodyOffsetTop(this); 
self.onMouseDown(event,{x:x,y:y}); 
},FALSCH); 
this.canvas.addEventListener('mouseup',function(event){ 
var x = event.pageX-getBodyOffsetLeft(this), 
y = event.pageY-getBodyOffsetTop(this); 
self.onMouseUp(event,{x:x,y:y}); 
},FALSCH); 
this.canvas.addEventListener('click',function(event){ 
var x = event.pageX-getBodyOffsetLeft(this), 
y = event.pageY-getBodyOffsetTop(this); 
self.onClick({x:x,y:y}); 
},FALSCH); 
}, 
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){ 
zurückkehren; 
} 
} 
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){ 
zurückkehren; 
} 
} 
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){ 
zurückkehren; 
} 
} 
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}; 
}anders{ 
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>

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