Bir web sitesi projesinde html, javascript ve tuvale uygulanması

Question

Belirli bir düğmeye tıklayarak renklerini değiştirmek zorunda olan 'bir taşıyıcı çanta' (dikdörtgen) oluşturmaya çalıştım. Müşteri, çantasına (logo) 'logosunu' (bazı metinleri) ekleyebilmelidir.

Her iki kod da kendi başlarına çalışmaktadır, ancak bunları bir komut dosyasında birleştirdiğimde bir şeyleri karıştırır.

dikdörtgenin kodudur:

<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> 

:

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> 

Bu burada kendi başına çalışır metin ekleyerek kodudur, ama asla yukarıda biriyle birlikte Çok teşekkürler!

Answer 1

http://editor.method.ac/'u kullanmanızı öneririm, çevrimiçi editro uygulamaları oluşturmak için çok yaratıcı ve güzel bir araç, ondan alıyorum, ücretsiz ve eksiksiz. ;) ana site: http://method.ac