Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 293
  • Last Modified:

image alpha value

Hi,
I have a image gallery where I display a different image every sec. It works fine but to have a fade in effecgt with javascript this is getting really messy.
Is there an easy way to change the opacity of an image or should I use something other than javacript?

 <canvas id="myCanvas" width="250" height="250"></canvas>
   <script>
  var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
   var j=0;
	var arr1 = [];
	var images=[];
	var imgLoaded = 0;
	var ii=0;

	arr1[0] = "images/bcave1.png";
	arr1[1] = "images/bcave2.png";
	arr1[2] = "images/bcave3.png";
	arr1[3] = "images/bcave4.png";
	
	 onImgLoad = function()
	{
  	 imgLoaded++;
	
 	  if(imgLoaded == 4) //all loaded
  	 {
  	
		 gameLoop = setInterval(doGameLoop, 1000);
		 
 	  }
	}
	
	  function doGameLoop() {

        ctx.clearRect(0,0,600,400);
        ctx.drawImage(images[ii], 50, 50);
		ii++; 
		//images[ii].x++;
        if (ii==4){
			ii=0;
		}
		
     }

	

	for (i=0;i<arr1.length;i++){
		
		
		images[i] = new Image();
 		images[i].onload = onImgLoad;
 		images[i].src = arr1[i];
		
	}
	
	
	
    </script>

Open in new window

0
jagguy
Asked:
jagguy
  • 3
1 Solution
 
leakim971PluritechnicianCommented:
0
 
jagguyAuthor Commented:
That works thanks .

I see you are fading the whole canvas but can I  reference the image to fade instead of the whole canvas. I might have many images on the canvas and i dont want to fadein/out the whole canvas but just the image.

Can I also specify a time instead of  $("#myCanvas").fadeIn("slow");//i prefer millsec and not slow

$("#myCanvas").fadeOut("slow", function() {//change

$("images[i]").fadeOut("slow", function() { //to this somehow?

Open in new window

0
 
leakim971PluritechnicianCommented:
take a look, just a look to the links provided
0
 
leakim971PluritechnicianCommented:
I might have many images on the canvas and i dont want to fadein/out the whole canvas but just the image.

For me there's no way, you're painting on it, this is not layers
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now