javascript - 阴影没有出现 黑暗到圈子

Question

我正在努力为我的圈子添加阴影...

我希望阴影只占圆的一半，并且需要是黑暗的...

我已经包含了我的影子代码，但它不起作用...

在下面提供我的代码

http://jsfiddle.net/fHmA8/1/

var drawArc = function(color, arcRadius, degTo, degFrom, isShadow) {
    if (!degFrom) {
        degFrom = 0;
    }
    if (isShadow) {
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
        ctx.shadowBlur = SHADOW_BLUR;
        ctx.shadowColor = '#656565';
    }
    ctx.lineWidth = SPINNER_WIDTH;
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.arc(centerX, centerY, arcRadius, degStart + degFrom, degStart + degTo, false);
    ctx.stroke();
}

Answer 1

由于阴影是有条件的，因此必须有一种机制也可以关闭阴影。否则，阴影将应用于所有下一张图。

所以，第一步:

var drawArc = function(color, arcRadius, degTo, degFrom, isShadow) {
    if (!degFrom) {
        degFrom = 0;
    }
    if (isShadow) {
        ctx.save();               // save context state
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
        ctx.shadowBlur = SHADOW_BLUR;
        ctx.shadowColor = '#000'; //'#656565'; // black shadow
    }
    ctx.lineWidth = SPINNER_WIDTH;
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.arc(centerX, centerY, arcRadius, degStart + degFrom, degStart + degTo, false);
    ctx.stroke();

    if(isShadow) {
        ctx.restore();            // if shadow was used, remove again
    }
}

然后，如果我将“一半”理解为 LED，因为那是我能看到的唯一一半(将底部想象成一个完整的圆圈)，那么只需稍微更改 animate() 内部的参数 方法:

drawArc('#aaa', radius, deg360, null, false);   // don't use shadow here
drawArc('#0e728e', radius, deg);
for (var i = 0, n = Math.floor(deg / deg60); i < n; i++) {
    var from = i * deg30 + deg1;
    var to = from + deg30 - deg1 * 2;
    drawArc('#250696', radius, to, from, true); // use shadow here instead
}

如果您确实想要背景有阴影而不是 LED，那么只需将上面的两个标志更改为相反的即可。

Updated fiddle here