ウェブサイトプロジェクトでhtml、javascript、canvasを実装

Question

私はキャリアバッグ（矩形）を作成しようとしましたが、特定のボタンをクリックして色を変えなければなりませんでした。顧客はバッグ（長方形）に「ロゴ」（テキスト）を追加できなければなりません。

両方のコードは単独で動作しますが、1つのスクリプトでそれらを組み合わせると、さまざまなことが混在します。

長方形のコードは次のとおりです。

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

これここに独自に働くテキストを追加するためのコードであり、決して上記1と組み合わせて、どうもありがとう！

Answer 1

http://editor.method.ac/を使用することをお勧めします。これは、オンラインの編集アプリを作成するための非常に創造的で素晴らしいツールです。私はそれを使用しています。無料で完全です。 ;） メインサイトはhttp://method.ac