Как изменить атрибуты конкретных фигур в холсте?

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; 
    } 
} 

Существует условие для этого.вета, который решает иметь тень или нет.

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 или любую другую в контексте холста. Вы можете видеть это here в действии.