デフォルトテキストを使用してキャンバスに描画する

Question

キャンバスに描画するためにcroquisライブラリを使用しています。その作業罰金

シナリオ： 私はそのプレースホルダをクリアしたい描画する前に、クリックにキャンバス上透かしやプレースホルダのいくつかの種類を示したいと思います。いくつかのいずれかが、任意の助けが

を理解されるであろう

何をすべきかを教えてもらえます

よろしく

あなたは透かしがあなたのキャンバスを初期化し、最初のクリックで、それをクリアしたいようですね

Answer 1

。私は、クロッキーライブラリに慣れていないんだけど、JavaScriptのソリューション平野は、以下の機能のようなものかもしれない -

var firstFlag = true; 
var canvas = $('#canvas'); 
var ctx = canvas.getContext('2d'); 

function watermark(e) { 
    if (firstFlag) { 
     /* firstFlag === true -> add text to canvas */ 
     ctx.fillStyle = '#999'; 
     ctx.font('bold 20px Serif'); 
     ctx.textAlign = 'center'; 
     ctx.fillText('Watermark Text', canvas.width/2, canvas.height/2); 

     /* reset firstFlag */ 
     firstFlag = false; 
    } else { 
     /* firstFlag === false -> clear Canvas */   
     ctx.clearRect(0,0,canvas.width,canvas.height); 

     /* remove eventListener */ 
     canvas.removeEventListener('click',watermark,false); 
    } 
} 

--- 

/* when the page is ready 
    add EventListener to canvas element and... */ 
canvas.addEventListener('click',watermark,false); 
/* ...initialise the canvas by calling watermark() */ 
watermark(false); 

watermark()関数が二回呼び出されます...おそらく、あなたのプロジェクトに合わせて、それを修正することができます。コード（最後の行）で呼び出されたときとキャンバス要素がクリックされたときに1回。 watermark()を最初に呼び出すと、キャンバスの中央に「透かしテキスト」が追加されます。2回目の呼び出し（クリック時）はキャンバスを消去し、eventListenerを削除してキャンバスをきれいにしたままにしますあなたが次にやりたいことがあれば何でもできる。

これが役に立ちます。 :)