为什么我的影子不模糊？ （动力学 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 个填充矩形并对其进行阴影处理。然后在顶部绘制第二个描边矩形。