Implementieren von HTML, Javascript und Canvas in einem Website-Projekt

Question

Ich habe versucht, "eine Tragetasche" (das Rechteck) zu erstellen, die ihre Farben durch Klicken auf eine bestimmte Schaltfläche ändern muss. Der Kunde muss sein 'Logo' (etwas Text) auf der Tasche (Rechteck) einfügen können.

Beide Codes funktionieren auf eigene Faust, aber wenn ich sie in einem Skript kombiniere, vermischen sich die Dinge.

Der Code des Rechtecks ​​ist:

var canvas=null; 
var context=null; 

window.onload = function() { 
canvas=document.getElementById("drawing"); 
context=canvas.getContext("2d"); 
     context.beginPath(); 
     context.rect(100, 50, 165, 200); 
     context.fillStyle = 'white'; 
     context.fill(); 
     context.lineWidth = 1; 
     context.strokeStyle = 'black'; 
     context.stroke(); 
} 

</script> 

Das hier ist der Codetext für das Hinzufügen, das auf eigenen Arbeiten, aber nie in Kombination mit dem obigen:

<input type="text" id="text_cnv" size="20" maxlength="12" /> 

<script> 
function clearCanvas(cnv) 
{ 
var ctx=cnv.getContext('2d'); 
ctx.beginPath(); 
ctx.save(); 
ctx.setTransform(1,0,0,1,0,0); 
ctx.clearRect(0,0,cnv.width,cnv.height); 
ctx.restore(); 
} 

function addTextCnv(ctx,text,x,y,maxWidth,lineHeight) 
{var words=text.split(' '); 
var nr_w=words.length 
var addtxt=''; 
for(var n=0;n<nr_w;n++) 
{ 
var txtLine=addtxt+words[n]+' '; 
var metrics=ctx.measureText(txtLine); 
var txtWidth=metrics.width; 

if(txtWidth>maxWidth&&n>0) 
{ 
ctx.fillText(addtxt,x,y); 
addtxt=words[n]+' '; 
y+=lineHeight; 
} 
else addtxt=txtLine; 
} 

ctx.fillStyle='black'; 
ctx.font='bold 17px sans-serif'; 
ctx.fillText(addtxt,x,y); 
} 
var drawing=document.getElementById('drawing'); 
var ctx1=drawing.getContext('2d'); 
var maxWidth=drawing.width-250; //here we change the width of where the letters start 
var lineHeight=23; 
var x_pos=(drawing.width-maxWidth)/2; 
var y_pos=175; //here we change the height of where the letters start 
document.getElementById('text_cnv').onkeyup=function(){clearCanvas(drawing); 
addTextCnv(ctx1,this.value,x_pos,y_pos,maxWidth,lineHeight); 
} 
</script> 

Danke vielmals!

Answer 1

Ich schlage vor, Sie verwenden http://editor.method.ac/, es ist sehr kreativ und nettes Werkzeug zum Erstellen von Online-Editroprogramme, ich bin davon verwendet, es ist kostenlos und vollständig. ;) die Hauptseite ist: http://method.ac