在绘制的画布元素上应用CSS

是否可以将CSS动画（在我的例子中是发光效果）应用于javascript在画布上绘制的圆

我使用的是angularjs指令：

我使用它作为计数器，我希望它每秒钟发光一次（已经得到了动画的css代码）

可能吗？

---

另一个想法是，使画布本身呈圆形，并将发光效果应用于画布。

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

您可以使用Through，这将允许您使用CSS和动画：

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

---

您不能将CSS应用于绘制到画布上的形状，但只需使用阴影即可创建辉光效果

var canvas = document.getElementById('canvas'), // canvas
    ctx = canvas.getContext('2d'),              // context
    w = canvas.width,                           // cache some values
    h = canvas.height,
    cx = w * 0.5,
    cy = h * 0.5,
    glow = 0,                                   // size of glow
    dlt = 1,                                    // speed
    max = 40;                                   // max glow radius

ctx.shadowColor = 'rgba(100, 100, 255, 1)';     // glow color
ctx.fillStyle = '#fff';                         // circle color

function anim() {
    ctx.clearRect(0, 0, w, h);                  // clear frame
    ctx.shadowBlur = glow;                      // set "glow" (shadow)

    ctx.beginPath();                            // draw circle
    ctx.arc(cx, cy, cx * 0.25, 0, 6.28);
    ctx.fill();                                 // fill and draw glow

    glow += dlt;                                // animate glow
    if (glow <= 0 || glow >= max) dlt = -dlt;

    requestAnimationFrame(anim);                // loop
}
anim();

var canvas=document.getElementById（'canvas'），//canvas
ctx=canvas.getContext（'2d'），//context
w=canvas.width，//缓存一些值
h=画布高度，
cx=w*0.5，
cy=h*0.5，
辉光=0，//辉光的大小
dlt=1，//速度
max=40；//最大发光半径
ctx.shadowColor='rgba（100100255，1）'；//发光颜色
ctx.fillStyle='#fff'；//圆形颜色
函数anim（）{
clearRect（0，0，w，h）；//清除帧
ctx.shadowBlur=glow；//设置“glow”（阴影）
ctx.beginPath（）；//绘制圆
ctx.arc（cx，cy，cx*0.25,0,6.28）；
ctx.fill（）；//填充并绘制光晕
辉光+=dlt；//设置辉光动画
如果（发光=最大值）dlt=-dlt；
requestAnimationFrame（动画）；//循环
}
动漫（）；

更新

要获得具有外部光晕的轮廓，您可以使用复合操作简单地“打孔”圆的中心。这里的示例使用“保存/还原”来删除阴影-您可以通过手动重置这些阴影来优化代码-但为简单起见，请执行以下修改：

ctx.fillStyle = '#fff';
// remove shadow from global

function anim() {
    ctx.clearRect(0, 0, w, h);

    // draw main circle and glow
    ctx.save();                                 // store current state
    ctx.shadowColor = 'rgba(100, 100, 255, 1)';
    ctx.shadowBlur = glow;

    ctx.beginPath();
    ctx.arc(cx, cy, cx * 0.25, 0, 6.28);
    ctx.fill();    
    ctx.restore();                              //restore -> removes the shadow

    // draw inner circle
    ctx.globalCompositeOperation = 'destination-out'; // removes what's being drawn
    ctx.beginPath();
    ctx.arc(cx, cy, cx * 0.23, 0, 6.28);          // smaller filled circle
    ctx.fill();    
    ctx.globalCompositeOperation = 'source-over'; // reset

    glow += dlt;
    if (glow <= 0 || glow >= max) dlt = -dlt;

    requestAnimationFrame(anim);
}

ctx.fillStyle='#fff'；
//从全局图像中删除阴影
函数anim（）{
ctx.clearRect（0，0，w，h）；
//绘制主圆并发光
保存（）；//存储当前状态
ctx.shadowColor='rgba（100100255,1）'；
ctx.shadowBlur=光晕；
ctx.beginPath（）；
ctx.arc（cx，cy，cx*0.25,0,6.28）；
ctx.fill（）；
还原（）；//还原->删除阴影
//画内圈
ctx.globalCompositeOperation='destination out'；//删除正在绘制的内容
ctx.beginPath（）；
ctx.arc（cx，cy，cx*0.23,0,6.28）；//较小的填充圆
ctx.fill（）；
ctx.globalCompositeOperation='source over'；//重置
辉光+=dlt；
如果（发光=最大值）dlt=-dlt；
请求动画帧（anim）；
}

合成操作将从下一个绘制操作中删除像素。只需在顶部绘制一个较小的填充圆，它将留下第一个圆及其光晕的轮廓

var canvas = document.getElementById('canvas'), // canvas
    ctx = canvas.getContext('2d'),              // context
    w = canvas.width,                           // cache some values
    h = canvas.height,
    cx = w * 0.5,
    cy = h * 0.5,
    glow = 0,                                   // size of glow
    dlt = 1,                                    // speed
    max = 40;                                   // max glow radius

ctx.shadowColor = 'rgba(100, 100, 255, 1)';     // glow color
ctx.fillStyle = '#fff';                         // circle color

function anim() {
    ctx.clearRect(0, 0, w, h);                  // clear frame
    ctx.shadowBlur = glow;                      // set "glow" (shadow)

    ctx.beginPath();                            // draw circle
    ctx.arc(cx, cy, cx * 0.25, 0, 6.28);
    ctx.fill();                                 // fill and draw glow

    glow += dlt;                                // animate glow
    if (glow <= 0 || glow >= max) dlt = -dlt;

    requestAnimationFrame(anim);                // loop
}
anim();

---

这真的很有帮助！不幸的是，我无法将其应用到我的示例中。你介意帮我解决这个问题吗？我只想在外圆上产生发光效果-但我能得到的只是在所有圆上产生发光效果-但没有动画：（在这里查看我的git：仍在尝试（连续3个小时…）但是运气不好。在第二张画布上画外圆会更好吗？@user2556555（迟答->时区差异）。当然可以，但是你可以设置一把小提琴，因为我不知道你的代码。只需把关键部分放进去，我就可以看一看。本质上：你可以在使用复合模式绘制圆后“戳”出圆的中心（将globalCompositeOperation模式设置为destination out，并在顶部绘制一个较小的圆圈，禁用阴影，将back模式设置为source over）。请参见此模式：