javascriptキャンバスオブジェクトを塗りつぶすためのボタンを使用

基本的にJavaScriptは青い枠線で2つと緑色の枠線で2つの三角形を描画します。私はボタンが押されたときに三角形を青い枠線の青で塗りつぶすはずです。javascriptキャンバスオブジェクトを塗りつぶすためのボタンを使用

現在のところ動作しませんが、{}が下のifステートメントから削除されると、緑の境界線付きの三角形が緑色に塗りつぶされます。

どのようなヒントも非常に役に立ちます！

window.onload = draw; 
 

 
function draw() { 
 
    var canvas = document.getElementById('myCanvas'); 
 
    if (canvas.getContext) { 
 
    var ctx = canvas.getContext('2d'); 
 
    ctx.beginPath(); 
 

 
    ctx.beginPath(); 
 
    ctx.strokeStyle = "blue"; 
 
    ctx.moveTo(600, 0); 
 
    ctx.lineTo(500, 200); 
 
    ctx.lineTo(700, 200); 
 
    ctx.closePath(); 
 
    ctx.stroke(); 
 

 
    ctx.beginPath(); 
 
    ctx.strokeStyle = "green"; 
 
    ctx.moveTo(500, 210); 
 
    ctx.lineTo(700, 210); 
 
    ctx.lineTo(600, 410); 
 
    ctx.closePath(); 
 
    ctx.stroke(); 
 

 
    } 
 
} 
 

 
function fillColor() { 
 
    var canvas = document.getElementById('myCanvas'); 
 
    var ctx = canvas.getContext('2d'); 
 
    if (ctx.strokeStyle == "blue") { 
 
    ctx.beginPath(); 
 
    ctx.fillStyle = "blue"; 
 
    ctx.fill(); 
 
    } 
 
}

<canvas id="myCanvas" width="700" height="410"></canvas>

出典

2016-09-21 D0nK3Y_D0nK

ctx.strokeStyleは＃コードを表示します。 console.log（ctx.strokeStyle）を試してください。それはあなたにヒントを与える可能性があります –

これは、strokeStyleに比べて間違ったことですか？ –

あなたの質問は明確ではありません、達成したいこと –

あなたはcolor.Youがあなたのfillcolorの機能を少し変更する必要がストロークで四角形を比較することはできません。あなたが色にして、各長方形を作成した後fillcolorの（）関数を呼び出す必要がある、それはあなた

HTML

<body> 
<canvas id="myCanvas" width="700" height="410"></canvas> 
</body>

にJavascriptを

<script> 
window.onload = draw; 

function draw() { 
var canvas = document.getElementById('myCanvas'); 
if (canvas.getContext) { 
    var ctx = canvas.getContext('2d'); 
    ctx.beginPath(); 

    ctx.beginPath(); 
    ctx.strokeStyle = "blue"; 
    ctx.moveTo(600, 0); 
    ctx.lineTo(500, 200); 
    ctx.lineTo(700, 200); 
    ctx.closePath(); 
    ctx.stroke(); 
    fillColor(ctx,'blue'); 
    ctx.beginPath(); 
    ctx.strokeStyle = "green"; 
    ctx.moveTo(500, 210); 
    ctx.lineTo(700, 210); 
    ctx.lineTo(600, 410); 
    ctx.closePath(); 
    fillColor(ctx,'red'); 
} 
} 

function fillColor(ctx,color) { 
    ctx.fillStyle = color; 
    ctx.fill(); 
}

を助けるかもしれない以下のコードを参照してください。塗りつぶす。

出典

2016-09-21 11:55:43

最初に三角形を描いてから特定の色の三角形を見つけて塗りつぶすボタンを押すことはできませんか？ –

floodfillアルゴリズムを実装することは可能ですが、同じ場所に別の色を使用して再描画するだけです。 –

これを行う方法についてのアドバイスはありますか？ –

javascriptキャンバスオブジェクトを塗りつぶすためのボタンを使用

答えて

関連する問題