微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

在绘制的Canvas Elements上应用CSS

是否可以将CSS动画(在我的情况下是一个发光效果)应用于通过 javascript在画布上绘制的圆圈?

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

我用它作为计数器,我希望它每秒都发光(已经获得了动画的css代码).

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

解决方法

您不能将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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效
js如何实现文字闪烁特效?(图文+视频)
CSS3怎么实现背景颜色渐变?(图文+视频)
Css3如何实现文本溢出隐藏并显示省略号效果
添加CSS的三种方式