2
我的問題是關於這個shadowBlur特徵用在下面的第二個（外部）矩形。 shadowBlur功能應用於此矩形後的每個形狀。 （如果你註釋掉shadowColor和shadowBlur行，然後取消註釋行上的shadowColor和shadowBlur行，你應該明白我的意思了。）我的問題是，如何將shadowBlur應用於特定部分Canvas繪圖不將該特徵應用於Canvas的每個後續部分。在這個例子中，我試圖爲每個畫布和上下文創建單獨的變量，但問題仍然存在。HTML5 Canvas，shadowColor＆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>
我將'unidentified'改爲'null'，它的功能就像一個魅力。我也嘗試了你的其他解決方案，並且它也工作得很好。感謝你！ – 2011-03-13 02:13:09