Amit20 Posted July 8, 2011 Share Posted July 8, 2011 Hello! I m working on a canvas tag. I m drawing an image. But what i exactly want is that the image should be drawn when the page starts loading. Thus making it look as a picture being drawn! I know it can be done using JS but i m unable to form exact code. I m trying with setTimeout() and setInterval() methods. Can anyone guide me through this. Any suggestions would be appreciated!!! Quote Link to comment https://forums.phpfreaks.com/topic/241396-drawing-an-image-onload/ Share on other sites More sharing options...
Adam Posted July 8, 2011 Share Posted July 8, 2011 But what i exactly want is that the image should be drawn when the page starts loading. That's exactly what happens already.. Do you mean after the page has loaded? Quote Link to comment https://forums.phpfreaks.com/topic/241396-drawing-an-image-onload/#findComment-1239980 Share on other sites More sharing options...
Amit20 Posted July 8, 2011 Author Share Posted July 8, 2011 Thank you for ur reply! That's exactly what happens. But i expect the lines to be drawn slowly one after other. Thus making it look like an animation. At certain interval of time . Quote Link to comment https://forums.phpfreaks.com/topic/241396-drawing-an-image-onload/#findComment-1239983 Share on other sites More sharing options...
Adam Posted July 8, 2011 Share Posted July 8, 2011 Assuming we're talking about a standard image, you can't force the browser to slowly draw it. Browsers aim to be fast, so forcing them to go slow is counter-intuitive. Plus browsers don't tend to load images line by line anymore - maybe IE does actually, I'm not sure. I don't know exactly what they do, but the image appears pixelated and becomes clearer, so they must read certain pixels at varied points to give a basic view of the image, and then go through and fill in the gaps. Just guessing here though, I've not looked into it. Anyway, the best solution for this wouldn't be to try and control the browser. You should look at animating a DIV element displayed over the image, to slowly reveal the image. It shouldn't be very difficult to do, especially with jQuery. Quote Link to comment https://forums.phpfreaks.com/topic/241396-drawing-an-image-onload/#findComment-1239987 Share on other sites More sharing options...
Amit20 Posted July 8, 2011 Author Share Posted July 8, 2011 Thank You again for your help!!! That's good idea. But i m drawing an image in canvas tag. Just look at my code. Then it will be a more clear idea what i want to do. Because by looking at the examples what HTML5 can do i think my solution could be somewhere near. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="Paper/paper.css" style="style.css" rel="stylesheet"> <script type='text/javascript' src='algoTree.js'></script> <!--[if lt IE 9]> <script src="excanvas/excanvas.js"></script> <![endif]--> <script type="text/javascript"> window.onload=function() { var canvas=document.getElementById("mycanvas"); var context=canvas.getContext("2d"); //right pillar context.moveTo(400,150); context.lineTo(400,250); //context.stroke(); //left pillar context.moveTo(300,150); context.lineTo(400,150); //context.lineWidth=2; //roof context.moveTo(300,150); context.lineTo(300,250); //context.lineWidth=2; //crucifix vertical context.moveTo(350,115); context.lineTo(350,75); //context.lineWidth=2; //crucifix horizontal context.moveTo(337.5,85); context.lineTo(362.5,85); //context.lineWidth=2; //triangle on roof context.moveTo(350,115); context.lineTo(325,150); context.moveTo(350,115); context.lineTo(375,150); //Land context.moveTo(0,250); context.lineTo(500,250); context.lineWidth=2; context.stroke(); //church door context.beginPath(); var centreX=350; var centreY=200; var radius=15; var starting=1.1*Math.PI; var ending=1.9*Math.PI; //var counterclockwise = false; context.arc(centreX,centreY,radius,starting,ending); context.lineWidth=2; context.stroke(); context.moveTo(336,193); context.lineTo(336,250); context.moveTo(364,193); context.lineTo(364,250); context.shadowOffsetX = 10; context.shadowOffsetY = 10; context.shadowBlur = 10; context.shadowColor = "black"; context.lineWidth=2; context.stroke(); height=250; width=150; spread=0; showLeaves=true; leavesType=tree.TINY_LEAVES; tree.draw(context,height,width,spread,showLeaves,leavesType); context.shadowOffsetX = 10; context.shadowOffsetY = 10; context.shadowBlur = 10; context.shadowColor = "black"; context.stroke(); }; </script> </head> <body> <div class="header"> <a href="#">Home</a> <a href="#">Events</a> <a href="#">Contact Us</a> </div> <canvas width="500px" height="350px" id="mycanvas" ></canvas> </bodY> </html> Quote Link to comment https://forums.phpfreaks.com/topic/241396-drawing-an-image-onload/#findComment-1239989 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.