Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

image alpha value

Posted on 2013-05-12
4
Medium Priority
?
289 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 83

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 83

Expert Comment

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

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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

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.
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 customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses

572 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