在绘制的画布元素上应用 CSS [英] Applying CSS on drawn Canvas Elements

问题描述

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

Is it possible to apply CSS Animations (in my case a glowing effect) to a circle that is drawn on a canvas by javascript?

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

I am using this angularjs directive: https://github.com/angular-directives/angular-round-progress-directive/blob/master/angular-round-progress-directive.js

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

I use it as a counter, and I want it to glow every second (got the css code for the animation already.

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

Is that possible? Another idea would be, to make the canvas itself circular, and apply the glowing effect to the canvas.

推荐答案

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

You can't apply CSS to elements drawn in the canvas, because they don't exist on the DOM. It's just as if they were a bitmap image.

不过，您可以使用 SVG 圈，这样您就可以使用 CSS 设置圆的样式并使用动画:

You could use an SVG circle though, which will allow you to style the circle with CSS and use animations:

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

这篇关于在绘制的画布元素上应用 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！