HTML5 Canvas,shadowColor和shadowBlur

Question

HTML5 Canvas,shadowColor和shadowBlur

我的问题是关于下面第二(外)矩形使用的shadowBlur功能.shadowBlur功能应用于此矩形后的每个形状.(如果你注释掉shadowColor和shadowBlur第21和22行,然后在第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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

c-s*_*ile 6

使用这个:

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

Run Code Online (Sandbox Code Playgroud)

或这个:

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

Run Code Online (Sandbox Code Playgroud)

在第二种情况下我不确定'undefined' - 取消/重置值的东西.

归档时间：	14 年，12 月前
查看次数：	7147 次
最近记录：	13 年，2 月前