Javascript 如何更改画布中特定形状的属性?

Javascript 如何更改画布中特定形状的属性?,javascript,html,css,canvas,Javascript,Html,Css,Canvas,我试图改变画布中特定对象的阴影(不是全部)。问题是,当我尝试将阴影赋予特定对象时,所有其他对象也会自动获得阴影。这是我的密码 CanvasState.prototype.draw = function() { // if our state is invalid, redraw and validate! if (!this.valid) { var ctx = this.ctx; var shapes = this.shapes; this.clea

我试图改变画布中特定对象的阴影(不是全部)。问题是,当我尝试将阴影赋予特定对象时,所有其他对象也会自动获得阴影。这是我的密码

 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条件中的命令会更改画布中所有形状的属性。那么是否有其他语法可以用来更改画布中特定形状的阴影

您可以始终在画布上下文中使用本机js函数setShadow或任何其他函数。你可以看到它的动作。

你需要先设置好阴影,然后才能用阴影绘制对象。之后,您需要在绘制其余对象之前移除阴影

最简单的方法是将
save()
/
restore()
与shadow结合使用。例如,要集成,您可以尝试以下方法(根据需要进行调整):


你能对这些形状做同样的处理吗?@ketankhandagale yah…你也能做同样的处理这些更改一直在正常运行。但仅适用于单一形状。当尝试对其他形状进行操作时,上一个形状将再次被禁用。有像ctx.mySel.shadowBlur这样的东西吗?我们可以这样做吗?
 if (this.light) { 
            ctx.shadowBlur=20;
            ctx.shadowColor="yellow";
         };
/// 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...