Question

当我将阴影效果应用于Sun变量时，它也会自动应用于海王星变量。我不想要这个。我是否给ctx一个不同的名称来解决这个问题，还是问题出在其他地方？

我被告知只保留一个上下文参考，所以我非常困惑。我觉得我需要改变一些线条，以便能够为每个变量赋予独特的属性。

以下是我的代码供您查看：

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

Answer 1

我只发现了2个问题，那就是你在全局设置它并且在创建太阳之后你有了阴影。你可以随意移动它，但是如果你想将它移到你的“太阳”上，那么最好这样做。

我发现最好的方法就是将更改代码包装在save（）和restore（）函数中。像这样：

    }, 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/

Answer 2

保留一个上下文，是的，但您必须记住，您在绘图上下文中设置的任何属性都将被记住以供将来的绘制操作使用。这有几种方法。

a）确保始终在任何绘制操作之前设置所需的属性。特别是可能被另一个对象的绘制操作覆盖的那些。

b）使用context.save（）和context.restore（）。您可以保存上下文的状态，进行更改，执行绘制操作，然后恢复到先前的状态，为下一个绘制操作做好准备，确保您没有与其他对象的任何其他绘制属性混淆。

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

Answer 3

您需要在使用fill（）方法之前设置阴影属性。

ctx.shadowColor = 'yellow';
ctx.shadowBlur = 50;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;      
ctx.fill();

在画布上的不同绘图上应用阴影

3 个答案: