当前位置: 首页 > 面试题库 >

在绘制的Canvas元素上应用CSS

温举
2023-03-14
问题内容

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

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

我将其用作计数器,并且希望它每秒发光一次(已经获得了动画的CSS代码。

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


问题答案:

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

不过,您可以使用SVG圆,这将允许您使用CSS
设置圆的样式并使用动画:

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


 类似资料:
  • 问题内容: 我想使用鼠标在HTML画布上绘制(例如:绘制签名,绘制名称…) 请帮我怎么办?请提供一些源代码。谢谢 问题答案: 这是一个工作示例。

  • 问题内容: 我目前有一个迷宫游戏,它绘制一个5 x 5的正方形(占用屏幕的宽度并将其均匀分割)。然后,对于每个使用x和y坐标的框,我使用drawRect绘制彩色背景。 我遇到的问题是我现在需要在同一位置绘制图像,因此需要替换当前的纯背景色填充。 这是我当前用于drawRect的代码(一些示例): 然后,我还需要为画布中的所有其他正方形实现背景图像。该背景将在其顶部绘制简单的1px黑色线条,当前代码

  • 本文向大家介绍canvas绘制七巧板,包括了canvas绘制七巧板的使用技巧和注意事项,需要的朋友参考一下 效果如下所示: 代码分享: 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!

  • 我使用canvas在位图上绘制,并将位图覆盖在imageView上。 我已经画了一个基本的绘图在方法中被称为DrawGraph(),当用户触摸画布我必须画一个圆圈,因为我已经使用画布在onTouchEvent()方法,它没有画任何东西,代码是下面给出的,什么是问题,我如何解决这个问题。 我还尝试创建另一个位图,上面有一条直线,将新位图设置为在绘图()末尾的图像视图,并检查点击()。它显示新的位图(

  • 本文向大家介绍canvas绘制的直线动画,包括了canvas绘制的直线动画的使用技巧和注意事项,需要的朋友参考一下 话不多说,请看代码: 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!

  • 在这个例子中我们将使用画布(Canvas)创建一个简单的绘制程序。 在我们场景的顶部我们使用行定位器排列四个方形的颜色块。一个颜色块是一个简单的矩形,使用鼠标区域来检测点击。 Row { id: colorTools anchors { horizontalCenter: parent.horizontalCenter