Heim > Artikel > Web-Frontend > HTML5-Leinwand, einfache Zeichenbrett-Implementierung, Code_html5-Tutorial-Fähigkeiten

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

WBOYOriginal: 2016-05-16 15:51:131244Durchsuche

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>

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：22 Grundkenntnisse über HTML5 (Grafik-Tutorial)_HTML5-Tutorial-FähigkeitenNächster Artikel：22 Grundkenntnisse über HTML5 (Grafik-Tutorial)_HTML5-Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen