HTML5画布，阴影颜色和阴影模糊程度

Question

HTML5画布，阴影颜色和阴影模糊程度

6

我的问题与以下第二个（外部）矩形中使用的shadowBlur功能有关。在此矩形之后，这个shadowBlur功能适用于每个形状。（如果您注释掉第21和22行的shadowColor和shadowBlur行，并取消注释14和15行的shadowColor和shadowBlur行，则应该看到我所说的内容。）我的问题是，如何将shadowBlur应用于Canvas绘图的特定部分，而不是将其应用于每个后续的Canvas绘图部分。在这个例子中，我尝试为每个画布和上下文创建单独的变量，但问题仍然存在。

归属：这些例子基于来自html5canvastutorials.com的示例。

<!DOCTYPE html> 
<html lang="en"
<head>
<script type="text/javascript">
    function addRect(){
        var canvas1=document.getElementById("myCanvas");
        var ctx=canvas1.getContext("2d");

        var canvas3=document.getElementById("myCanvas");
        var ctx3=canvas3.getContext("2d");

        ctx.rect(60,60,180,80);
        ctx.fillStyle="green";
        //ctx.shadowColor="black";
        //ctx.shadowBlur = 10;
        ctx.fill(); 


        ctx3.lineWidth = 3;
        ctx3.strokeStyle='red'; 
        ctx3.shadowColor="black";
        ctx3.shadowBlur = 10;       
        ctx3.strokeRect(45,45,210,110); 
    }

    function addOval(){
        var canvas2=document.getElementById("myCanvas");
        var context=canvas2.getContext("2d");

        // define center of oval
        var centerX = 288;
        var centerY = 250;

        // define size of oval
        var height = 100;
        var width = 250;

        var controlRectWidth = width  * 1.33;

        context.beginPath();
        context.moveTo(centerX,centerY - height/2);
        // draw left side of oval
        context.bezierCurveTo(centerX-controlRectWidth/2,centerY-height/2,
            centerX-controlRectWidth/2,centerY+height/2,
            centerX,centerY+height/2);

        // draw right side of oval
        context.bezierCurveTo(centerX+controlRectWidth/2,centerY+height/2,
            centerX+controlRectWidth/2,centerY-height/2,
            centerX,centerY-height/2);

        context.fillStyle="red";
        context.fill();
        context.lineWidth=5;
        context.strokeStyle="blue"; 
        context.stroke();   
        context.closePath();    
    }
</script>

</head>
<body onload="addRect(); addOval();">
    <canvas id="myCanvas" width="700" height="400">
    Your browser does not support the canvas element.
    </canvas>
</body>
</html>

- John R

3个回答

1

    var canvas3=document.getElementById("myCanvas");
    var ctx3=canvas1.getContext("2d");

将第二行中的canvas1更改为canvas3。您的ctx3实际上指向了canvas1，我认为这是错误的。

- SpliFF

很好的发现。谢谢你，但问题仍然存在。我已经用你的发现编辑了问题。 - John R

0

您还可以考虑将阴影颜色设置为“透明”，而不是未定义或空值。这似乎也能解决问题。

- Coogara

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- c-smile · Accepted Answer

请使用以下代码：

ctx.save();
  ctx.shadowColor="black";
  ctx.shadowBlur = 10;       
  ctx.strokeRect(45,45,210,110); 
ctx.restore();

或者这样：

ctx.shadowColor="black";
ctx.shadowBlur = 10;       
ctx.strokeRect(45,45,210,110); 
ctx.shadowColor= undefined; 
ctx.shadowBlur = undefined;

我不确定第二种情况中的 'undefined'，需要将其重置为 null。