2016-04-04 9 views
1

影の効果をSunの変数に適用すると、それは自動的にNeptuneのものにも適用されます。私はこれを望んでいない。これを解決するために別の名前をctxに渡しますか、それとも別の場所にあるのですか?キャンバス内の別の図面に影を付ける

私はちょうど1コンテキストの参照を維持するために言われてきたので、私はひどく混乱しています。私は、各変数に固有のプロパティを与えることができるように、いくつかの行をシャッフルする必要があると感じています。

function initCanvas(){ 
    var ctx = document.getElementById('my_canvas').getContext('2d'); 
    var cW = ctx.canvas.width, cH = ctx.canvas.height; 
    var rectW = 40; 
    var rectH = 0; 
    var rectX = (ctx.canvas.width * .5) - (Math.PI* 1 * .5); 
    var rectY = (ctx.canvas.height * .5) - (rectH * .5); 
    var Starsystem = { 
     Neptune: { 
      x: 180, 
      y: 300, 
      render: function(){ 
      Starsystem.Neptune.x = Starsystem.Neptune.x + 0; 
      Starsystem.Neptune.y = Starsystem.Neptune.y - 0; 
      ctx.fillStyle = "rgb(65,105,225)"; 
      ctx.beginPath(); 
      ctx.arc(Starsystem.Neptune.x , Starsystem.Neptune.y, 10, 0, Math.PI*2, true); 
      ctx.closePath(); 
      ctx.fill(); 
      } 
     }, Sun: { 
     render: function(){ 
     ctx.fillStyle = "rgb(255,255,51)"; 
     ctx.beginPath(); 
     ctx.arc(rectX, rectY, rectW, rectH, Math.PI*2, true); //alligns the sun in center 
     ctx.closePath(); 
     ctx.fill(); 
     ctx.shadowColor = 'yellow'; 
     ctx.shadowBlur = 50; 
     ctx.shadowOffsetX = 0; 
     ctx.shadowOffsetY = 0;  
     //Still applied to all 
     } 
    } 
} 

答えて

2

私は2の問題を発見し、それはあなたがグローバルに設定されたことだったとあなたは太陽を作成した後は、影を持っていました。あなたはどこにいてもそれを移動することができますが、それをあなたの "Sun"に適用したい場合は、このようにするのが一番良いでしょう。

私はその問題を停止するために最善を見つけた方法は、保存中に私の変更コードをラップすることです()と()関数を復元します。このように:

}, Sun: { 
    render: function(){ 
    ctx.fillStyle = "rgb(255,255,51)"; 
    ctx.save(); //store ctx so it can be later reused. 
    ctx.shadowColor = 'yellow'; 
    ctx.shadowBlur = 50; 
    ctx.shadowOffsetX = 0; 
    ctx.shadowOffsetY = 0;  
    ctx.beginPath(); 
    ctx.arc(rectX, rectY, rectW, rectH, Math.PI*2, true); //alligns the sun in center 
    ctx.closePath(); 
    ctx.fill(); 
    ctx.restore(); //ctx at time of save. 

ワーキングフィドル:https://jsfiddle.net/gregborbonus/g1d6jkh7/

+0

確かに問題でした。私は保存と復元の方法について知らなかった。ありがとうございました。 – Zhyohzhy

+0

shadowColorを透明に設定することで、シャドー描画をキャンセルすることもできます( 'shadowColor = 'rgba(0,0,0,0)')。これは、shadowColorに加えて多くのコンテキストプロパティを保存/復元する 'save&restore'を使うよりも少し効率的です。 ;-) – markE

1

がはい、1つのコンテキストを保持していますが、描画コンテキストに設定されたすべてのプロパティは、将来のドロー操作のために記憶されるだろうことに留意する必要があります:あなたが見ることのために

は、ここに私のコードです。これにはいくつかの方法があります。

a)には、必ずいずれかの描画操作を行う前に、必要なプロパティを設定することを確認してください。特に、別のオブジェクトの描画操作によって上書きされたオブジェクト。

b)context.save()およびcontext.restore()を使用します。コンテキストの状態を保存したり、変更したり、描画操作を行ったり、元の状態に戻したりして、次の描画操作の準備をして、他のオブジェクトの描画プロパティを壊さないようにできます。

http://www.tutorialspoint.com/html5/canvas_states.htm

1

あなたはfill()メソッドを使用する前に、影のプロパティを設定する必要があります。

ctx.shadowColor = 'yellow'; 
ctx.shadowBlur = 50; 
ctx.shadowOffsetX = 0; 
ctx.shadowOffsetY = 0;  
ctx.fill(); 
関連する問題