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...