上绘制的画布元素应用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指令：<一href=\"https://github.com/angular-directives/angular-round-progress-directive/blob/master/angular-round-progress-directive.js\" rel=\"nofollow\">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 code为动画了。

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屋！