css - 在绘制的 Canvas 元素上应用 CSS

Question

是否可以将 CSS 动画(在我的例子中是发光效果)应用于通过 javascript 在 Canvas 上绘制的圆圈？

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

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

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

Answer 1

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

你可以使用 SVG circle不过，这将使您能够 style the circle使用 CSS 并使用动画:

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