I have a radials gradient and I want animate the opacity to make transparent and then restore the real opacity...
I searched the posibles solutions such as
context.globalAlpha
but all radials gradient remain invisible and I want one...
other possible solutions?
You are on the right track!
You can use context.globalAlpha to change the opacity of a radial gradient:
Example code and a Demo: http://jsfiddle.net/m1erickson/Cd79L/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color:white; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
// canvas related variables
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
// variables used to draw & animate the ring
var PI2 = Math.PI * 2;
var cancelAnimationId;
var startingX=100;
var endingX=225;
var x=startingX;
var deltaX=1;
var y=100;
var radius=50;
// start the animation loop
requestAnimationFrame(animate);
// the animation loop
function animate() {
// request another animation loop
requestAnimationFrame(animate);
// create the gradient at the current x,y
var radgrad=ctx.createRadialGradient(x,y,0,x,y,radius);
radgrad.addColorStop(0.00,"green");
radgrad.addColorStop(1.00,"white");
ctx.fillStyle=radgrad;
// draw the ring at the radius set using the easing functions
ctx.clearRect(0,0,cw,ch);
ctx.save();
ctx.globalAlpha=(x-startingX)/100;
ctx.beginPath();
ctx.arc(x,y,radius,0,PI2);
ctx.closePath();
ctx.fill();
ctx.restore();
x+=deltaX;
if(x<startingX || x>endingX){deltaX*=-1;x+=deltaX;}
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas> </body>
</html>
