Question

是否可以将CSS动画（在我的情况下是一种发光效果）应用于通过javascript在画布上绘制的圆圈？

我正在使用此angularjs指令：https://github.com/angular-directives/angular-round-progress-directive/blob/master/angular-round-progress-directive.js

我用它作为计数器，我希望它每秒都发光（已经获得了动画的css代码。

这可能吗？另一个想法是，使画布本身呈圆形，并将发光效果应用于画布。

Answer 1

您无法将CSS应用于绘制到画布的形状，但只需使用阴影即可创建发光效果。

<强> A demo here

var canvas = document.getElementById('canvas'), // canvas
    ctx = canvas.getContext('2d'),              // context
    w = canvas.width,                           // cache some values
    h = canvas.height,
    cx = w * 0.5,
    cy = h * 0.5,
    glow = 0,                                   // size of glow
    dlt = 1,                                    // speed
    max = 40;                                   // max glow radius

ctx.shadowColor = 'rgba(100, 100, 255, 1)';     // glow color
ctx.fillStyle = '#fff';                         // circle color

function anim() {
    ctx.clearRect(0, 0, w, h);                  // clear frame
    ctx.shadowBlur = glow;                      // set "glow" (shadow)

    ctx.beginPath();                            // draw circle
    ctx.arc(cx, cy, cx * 0.25, 0, 6.28);
    ctx.fill();                                 // fill and draw glow

    glow += dlt;                                // animate glow
    if (glow <= 0 || glow >= max) dlt = -dlt;

    requestAnimationFrame(anim);                // loop
}
anim();

example

<强>更新

要获得外部发光的轮廓，您可以使用复合操作简单地“打出”圆的中心。这里的示例使用save / restore来删除阴影 - 您可以通过手动重置这些来优化代码 - 但为简单起见，请执行以下修改：

ctx.fillStyle = '#fff';
// remove shadow from global

function anim() {
    ctx.clearRect(0, 0, w, h);

    // draw main circle and glow
    ctx.save();                                 // store current state
    ctx.shadowColor = 'rgba(100, 100, 255, 1)';
    ctx.shadowBlur = glow;

    ctx.beginPath();
    ctx.arc(cx, cy, cx * 0.25, 0, 6.28);
    ctx.fill();    
    ctx.restore();                              //restore -> removes the shadow

    // draw inner circle
    ctx.globalCompositeOperation = 'destination-out'; // removes what's being drawn
    ctx.beginPath();
    ctx.arc(cx, cy, cx * 0.23, 0, 6.28);          // smaller filled circle
    ctx.fill();    
    ctx.globalCompositeOperation = 'source-over'; // reset

    glow += dlt;
    if (glow <= 0 || glow >= max) dlt = -dlt;

    requestAnimationFrame(anim);
}

复合操作将从下一个绘制操作中删除像素。只需在顶部绘制一个较小的实心圆圈，这将留下第一个圆圈的轮廓及其发光。

<强> Modified fiddle here

example2

Answer 2

您不能将CSS应用于画布中绘制的元素，因为它们不存在于DOM上。就像它们是位图图像一样。

您可以使用SVG circle，这样您就可以使用CSS style the circle并使用动画：

<svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

在绘制的Canvas元素上应用CSS

2 个答案: