我的问题是关于下面第二个（外部）矩形使用的shadowBlur功能。 此矩形后，shadowBlur功能将应用于的每个形状。 （如果注释掉shadowColor和shadowBlur第21行和第22行，然后在第14行和第15行取消注释shadowColor和shadowBlur行，你应该看到我的意思。）我的问题是，如何将shadowBlur应用于一个特定的“画布”绘图的一部分，而不将该特征应用于“画布”的每个后续部分。在这个例子中，我尝试为每个画布和上下文创建单独的变量，但问题仍然存在。
归因：这些示例基于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>
答案 0 :(得分：6)
使用此：
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' - 取消/重置值。
答案 1 :(得分：1)
var canvas3=document.getElementById("myCanvas");
var ctx3=canvas1.getContext("2d");
在第二行中将canvas1更改为canvas3。你的ctx3实际上是指向canvas1，我认为这是错误的。
答案 2 :(得分：0)
您还可以考虑将阴影颜色设置为“透明”而不是undefined或null。这似乎也可以解决问题。