Solved

image alpha value

Posted on 2013-05-12
4
281 Views
Last Modified: 2013-05-12
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
Comment
Question by:jagguy
  • 3
4 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39160249
0
 

Author Comment

by:jagguy
ID: 39160290
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
 
LVL 82

Expert Comment

by:leakim971
ID: 39160296
take a look, just a look to the links provided
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39160302
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

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to dynamically set the form action using jQuery.

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question