Question

我想把阴影带到我的圈子里......

我希望阴影仅适用于圆圈的一半，并且需要变暗...

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

在下面提供我的代码

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

然后，如果我将“half”理解为leds，因为那是我能看到的唯一一半（想象底部是一个完整的圆圈），那么只需在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
}

如果你意味着背景是阴影而不是leds那么只需将上面的两个标志改为对立面。

<强> Updated fiddle here

Snap

阴影不显示黑暗到圆圈

1 个答案: