?
Solved

image alpha value

Posted on 2013-05-12
4
Medium Priority
?
284 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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

What is a Denial of Service (DoS)?

A DoS is a malicious attempt to prevent the normal operation of a computer system. You may frequently see the terms 'DDoS' (Distributed Denial of Service) and 'DoS' used interchangeably, but there are some subtle differences.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

800 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