HTML5 Canvas, shadowColor & shadowBlur

제 질문은 아래의 두 번째 (바깥 쪽) 직사각형에 사용 된이 shadowBlur 기능에 관한 것입니다. shadowBlur 피처는 의 모든 모양에이 사각형 뒤에 적용됩니다. (shadowColor와 shadowBlur 라인을22로 주석 처리하고,라인의 shadowColor와 shadowBlur 라인의 주석 처리를 제거했다면, 무슨 뜻인지 알 것입니다.) 제 질문은 어떻게 shadowBlur를 특정 부분에 적용할까요? 캔버스는 캔버스의 모든 후속 부분에 기능을 적용하지 않고 그립니다. 이 예제에서는 각 캔버스와 컨텍스트에 대해 별도의 변수를 만들려고 시도했지만 문제는 계속 발생합니다.HTML5 Canvas, shadowColor & shadowBlur

기여 이러한 예는 두번째 라인에 canvas3하는 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>

출처

2011-03-13 John R

사용 중이 :

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;

나는 두 번째 경우에 '정의되지 않은'확실하지 않다.

출처

2011-03-13 01:44:42

나는 '신원 미상'을 'null'로 변경했으며 매력처럼 작동했습니다. 나는 또한 당신의 다른 해결책을 시도해 보았다. 고마워! –

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

canvas1 변화에서 실시 예에 기초한다. 귀하의 ctx3 실제로 canvas1 가리키는 잘못 생각합니다.

출처

2011-03-13 01:26:07 SpliFF

잡기. 고마워,하지만 문제는 여전히 지속됩니다. 나는 당신의 잡담으로 질문을 편집했다. –

그림자 색상을 undefined 또는 null 대신 "transparent"로 설정할 수도 있습니다. 이것은 또한 트릭을하는 것으로 보인다.

출처

2012-12-27 22:22:23 Coogara

HTML5 Canvas, shadowColor & shadowBlur

답변

관련 문제