在繪製的畫布元素上應用CSS

Question

是否可以將CSS動畫（在我的情況下是一種發光效果）應用於通過javascript在畫布上繪製的圓圈？

我用這angularjs指令：https://github.com/angular-directives/angular-round-progress-directive/blob/master/angular-round-progress-directive.js

我使用它作爲一個計數器，我希望它煥發每秒（得到了動畫已經CSS代碼

這是可能的 ？另一個想法是，使畫布本身爲圓形，並將發光效果應用到畫布上。

Answer 1

不能將CSS應用於畫布中繪製的元素，因爲它們不存在於DOM上。就好像它們是位圖圖像一樣。

你可以使用一個SVG circle，雖然，這將讓你style the circle CSS和使用動畫：

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

Answer 2

不能應用CSS來吸引到畫布上的形狀，但你可以通過簡單地創建發光效果影子。

A demo here

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(); 

更新

要獲得與外發光綱要，你可以簡單地 「衝出來」 使用複合操作的圓心。這裏的示例使用保存/恢復去除陰影 - 可以通過手動復位這些優化代碼 - 但爲了簡單起見，做以下修改：

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); 
} 

所述的複合操作將在下一次繪製操作除去的像素。只需在頂部繪製一個較小的實心圓，這將會留下第一個圓的輪廓及其發光。

Modified fiddle here