캔버스에서 특정 도형의 속성을 변경하는 방법은 무엇입니까?

Question

캔버스에서 특정 객체의 그림자를 변경하려고합니다 (전부가 아님). 문제는 특정 객체에 그림자를 주려고 할 때 자동으로 다른 모든 객체도 그림자를 얻는다는 것입니다. 여기 내 코드가

CanvasState.prototype.draw = function() { 
    // if our state is invalid, redraw and validate! 
    if (!this.valid) { 
    var ctx = this.ctx; 
    var shapes = this.shapes; 
    this.clear(); 

    // ** Add stuff you want drawn in the background all the time here ** 

    // draw all shapes 
    var l = shapes.length; 
    for (var i = 0; i < l; i++) { 
     var shape = shapes[i]; 
     // We can skip the drawing of elements that have moved off the screen: 
     if (shape.x > this.width || shape.y > this.height || 
      shape.x + shape.w < 0 || shape.y + shape.h < 0) continue; 
     shapes[i].draw(ctx); 
    } 

    // draw selection 
    // right now this is just a stroke along the edge of the selected Shape 
    if (this.selection != null) { 
     var ctx = this.ctx; 
     ctx.strokeStyle = this.selectionColor; 
     ctx.lineWidth = this.selectionWidth; 
     var mySel = this.selection; 
     temp = mySel; 

     if (this.light) { 
      ctx.shadowBlur=20; 
      ctx.shadowColor="yellow"; 
     }; 

     ctx.strokeRect(mySel.x -15,mySel.y -15 ,mySel.w,mySel.h); 

     if (del==1) { 
     del=0; 
     mySel.x=0; 
     mySel.y=0; 
     mySel.w=0; 
     mySel.h=0; 
     mySel.r=0; 
     mySel.shapes.draw(ctx); 

     }; 

     if (chcolor == 1) { 
     chcolor=0; 
     mySel.fill = pixelColor; 
     mySel.shapes.draw(ctx); 
     }; 

    } 

    // ** Add stuff you want drawn on top all the time here ** 

    this.valid = true; 
    } 
} 

그림자가 있기로 결정한 this.light의 조건이 있습니다.

if (this.light) { 
      ctx.shadowBlur=20; 
      ctx.shadowColor="yellow"; 
     }; 

if 조건의 명령은 캔버스에있는 모든 모양의 속성을 변경합니다. 캔버스에서 특정 모양의 그림자를 변경할 수있는 다른 구문이 있습니까?

Answer 1

섀도우로 개체를 그리려면 먼저 그림자를 설정해야합니다. 그런 다음 나머지 오브젝트를 그리기 전에 그림자를 제거해야합니다.

가장 간단한 방법은 그림자와 결합 된 save()/restore()을 사용하는 것입니다. 예를 들어 통합하려면 다음과 같이 시도해보십시오 (필요에 따라 조정).

/// enable shadow for next drawn object 
if (this.light) { 
    ctx.save(); 
    ctx.shadowBlur=20; 
    ctx.shadowColor="yellow"; 
}; 

/// draw object/shape 
ctx.strokeRect(mySel.x -15,mySel.y -15 ,mySel.w,mySel.h); 

/// remove shadow 
if (this.light) { 
    ctx.restore(); 
}; 

... other code... 

Answer 2

캔버스 컨텍스트에서 기본 js 함수 setShadow 또는 anyother를 항상 사용할 수 있습니다. 당신은 실제로 그것을 볼 수 here.