Maison >interface Web >Tutoriel H5 >html5 toile simple planche à dessin mise en œuvre code_html5 compétences du didacticiel

html5 toile simple planche à dessin mise en œuvre code_html5 compétences du didacticiel

WBOYoriginal: 2016-05-16 15:51:131310parcourir

Rendu :

Remarque : Pour que le code suivant s'exécute, veuillez l'exécuter sous un navigateur prenant en charge HTML5 pour voir l'effet.

<!doctype html> 
<html> 
<tête> 
<title>toile简单画板</title> 
<style type="text/css"> 
#peut{ largeur:600px; hauteur : 500 px ; bordure : 1px solide #ccc ; marge supérieure : 0 px ; marge gauche : 20 px ;} 
</style> 
≪/tête> 
<corps> 
<h2 style="padding-left:20px">toile简单画板</h2> 
<id de toile="can" width="600" height="500"></canvas> 
<script type="text/javascript"> 
fonction getBodyOffsetTop(el){ 
var haut = 0 ; 
faire{ 
top = top el.offsetTop; 
} while (el = el.offsetParent); 
retour en haut ; 
} 
fonction getBodyOffsetLeft(el){ 
var gauche = 0 ; 
faire{ 
gauche = gauche el.offsetLeft; 
} while (el = el.offsetParent); 
revenez à gauche; 
} 
fonction Dessin(toile,options){ 
typeof canvas == 'string' && (canvas = document.getElementById(canvas)); 
si(!canvas || !canvas.getContext){ 
throw new Error(100, 'ne supporte pas le canevas !'); 
} 
cette.option = { 
couleurs :['#000000','#ff0000','#00ff00','#0000ff','#00ffff','#7fef02','#4488bb'] 
} ; 
this.setOption(options); 
this.init(toile); 
} 
Dessin.prototype = { 
setOption:fonction(options){ 
type d'options == 'objet' || (options = {}); 
pour(var i dans les options){ 
commutateur(i){ 
cas 'couleurs' : 
this.option[i] = options[i]; 
casser; 
} 
} 
}, 
init:fonction(toile){ 
this.canvas = toile ; 
this.context = canvas.getContext('2d'); 
this.context.lineWidth = 1; 
this.context.lineJons = 'rond'; 
this.context.lineCep = 'rond'; 
this.isButtonDown = faux ; 
this.historyStroker = []; 
this.curStroker = {color:'#000000',path:[]}; 
ceci.lastX = 0; 
this.lastY = 0; 
this.curColor = '#000000'; 
this.toolbarspos ={}; 
this.bindEvent(); 
this.ResetDrawToolbar(); 
}, 
bindEvent:fonction(){ 
var soi = ceci ; 
this.canvas.addEventListener('mousemove',function(event){ 
var x = event.pageX-getBodyOffsetLeft(this), 
y = event.pageY-getBodyOffsetTop(this); 
self.onMouseMove({x:x,y:y}); 
},FAUX); 
this.canvas.addEventListener('mousedown',function(event){ 
var x = event.pageX-getBodyOffsetLeft(this), 
y = event.pageY-getBodyOffsetTop(this); 
self.onMouseDown(event,{x:x,y:y}); 
},FAUX); 
this.canvas.addEventListener('mouseup',function(event){ 
var x = event.pageX-getBodyOffsetLeft(this), 
y = event.pageY-getBodyOffsetTop(this); 
self.onMouseUp(event,{x:x,y:y}); 
},FAUX); 
this.canvas.addEventListener('click',function(event){ 
var x = event.pageX-getBodyOffsetLeft(this), 
y = event.pageY-getBodyOffsetTop(this); 
self.onClick({x:x,y:y}); 
},FAUX); 
}, 
onMouseMove:fonction(pos){ 
si(this.isButtonDown){ 
var p = this.toolbarspos; 
pour(var je dans p){ 
si(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){ 
retour; 
} 
} 
this.context.lineTo(pos.x,pos.y); 
this.context.AVC(); 
this.lastX = pos.x; 
this.lastY = pos.y; 
this.curStroker.path.push(pos); 
} 
}, 
onMouseDown:fonction(événement,pos){ 
si(événement.bouton == 0){ 
var p = this.toolbarspos; 
pour(var je dans p){ 
si(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){ 
retour; 
} 
} 
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:fonction(événement,pos){ 
si(événement.bouton == 0){ 
var p = this.toolbarspos; 
pour(var je dans p){ 
si(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){ 
retour; 
} 
} 
this.isButtonDown = faux ; 
this.historyStroker.push(this.curStroker); 
this.curStroker = {color:this.curColor,path:[]} ; 
} 
}, 
ResetDrawAll:fonction(){ 
this.context.clearRect(0,0,500,500); 
this.ResetDrawCentre(); 
this.ResetDrawToolbar(); 
}, 
ResetDrawCentre:fonction(){ 
var p = this.historyStroker,p2, 
curColor = this.context.StrokeStyle; 
pour(var i=0; i< p.length;i ){ 
this.context.StrokeStyle = p[i].color; 
this.context.beginPath(); 
pour(var t=0; t<p[i].path.length;t ){ 
p2 = p[i].chemin[t]; 
if(t==0) this.context.moveTo(p2.x,p2.y); 
this.context.lineTo(p2.x,p2.y); 
this.context.AVC(); 
} 
this.context.beginPath(); 
} 
this.context.StrokeStyle = curColor; 
}, 
ResetDrawToolbar:fonction(){ 
var curcolor = this.context.fillStyle; 
pour(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}; 
}autre{ 
this.context.fillRect(i*35 5,5,30,20); 
this.toolbarspos[i] = {x:i*35 5,y:5,w:30,h:20}; 
} 
this.context.AVC(); 
} 
this.context.fillStyle = curcolor; 
}, 
onClick:fonction(pos){ 
var p = this.toolbarspos; 
pour(var je dans p){ 
si(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(); 
} 
} 
} 
} ; 
nouveau dessin('peut'); 
</script></corps> 
</html>

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：22 compétences de base sur HTML5 (tutoriel graphique)_compétences du didacticiel HTML5Article suivant：22 compétences de base sur HTML5 (tutoriel graphique)_compétences du didacticiel HTML5

Articles Liés

Voir plus