为什么我的影子模糊不清？ （Kinetic JS）

Question

我正在学习KineticJS并修补阴影。我做了一个形状并给它阴影模糊，但阴影并不模糊。我正在使用最新版本的Chrome。这是我正在使用的代码：

var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
});

var layer = new Kinetic.Layer();

var rect = new Kinetic.Rect({
    x: 250,
    y: 120,
    width: 100,
    height: 50,
    fill: '#00D2FF',
    stroke: 'black',
    strokeWidth: 4,
    shadowColor: 'black',
    shadowBlur: 10,
    shadowOffset: {
        x: 10,
        y: 10
    },
    shadowOpacity: 0.5
});

// add the shape to the layer
layer.add(rect);

// add the layer to the stage
stage.add(layer);

从这里复制：http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shadows/
这是一个小提琴：http://jsfiddle.net/acbabis/Tu8Qh/

Answer 1

是的，这是Chrome中的不当行为，它会对动能行程施加阴影，对动能填充施加阴影（双重阴影）。

当前版本的KineticJS还没有令人满意地解释/纠正这种不良行为。

解决方法是：

• 仅使用笔划或填充，但不能同时使用两者。

• 画1个填充的矩形并遮住它。然后在顶部绘制第二个描边矩形。