影の効果を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
}
}
}
確かに問題でした。私は保存と復元の方法について知らなかった。ありがとうございました。 – Zhyohzhy
shadowColorを透明に設定することで、シャドー描画をキャンセルすることもできます( 'shadowColor = 'rgba(0,0,0,0)')。これは、shadowColorに加えて多くのコンテキストプロパティを保存/復元する 'save&restore'を使うよりも少し効率的です。 ;-) – markE