Applying CSS on drawn Canvas Elements

问题

Is it possible to apply CSS Animations (in my case a glowing effect) to a circle that is drawn on a canvas by javascript?

I am using this angularjs directive: https://github.com/angular-directives/angular-round-progress-directive/blob/master/angular-round-progress-directive.js

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.

回答1:

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.

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>

回答2:

You can't apply CSS to shapes drawn to canvas, but you can create a glow effect simply by using the shadow.

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

Update

To get a outline with outer glow you can simply "punch out" the center of the circle using a composite operation. Here the example uses save/restore to remove the shadow - you can optimize the code by manually resetting these - but for simplicity, do the following modification:

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

The composite operation will remove the pixels from the next draw operation. Simply draw a smaller filled circle on top which will leave an outline of the first circle and its glow.

Modified fiddle here

来源：https://stackoverflow.com/questions/22757825/applying-css-on-drawn-canvas-elements

标签

css

angularjs

canvas

angularjs-directive

css-animations