i have written javascript supposed scroll pictures across screen using canvas. unable work , appreciate help. able work using 1 picture , no array want able use array , load pictures 1 after small space between them.
var img = new image[]; img[0] = new image; img[0].src = 'images/juniors.jpg'; img[1] = new image; img[1].src = 'images/minis.jpg'; img[2] = new image; img[2].src = 'images/senior.jpg'; var canvasxsize = 1040; var canvasysize = 240; var speed = 40; //lower faster var scale = 1.05; var y = -4.5; //vertical offset var dx = 0.75; var imgw; var imgh; var x = 0; var clearx; var cleary; var ctx; img.onload = function() { imgw = img.width*scale; imgh = img.height*scale; if (imgw > canvasxsize) { x = canvasxsize-imgw; } // image larger canvas if (imgw > canvasxsize) { clearx = imgw; } // image larger canvas else { clearx = canvasxsize; } if (imgh > canvasysize) { cleary = imgh; } // image larger canvas else { cleary = canvasysize; } ctx = document.getelementbyid('canvas').getcontext('2d'); //get canvas element } function draw() { //clear canvas ctx.clearrect(0,0,clearx,cleary); //if image <= canvas size if (imgw <= canvasxsize) { //reset, start beginning if (x > (canvasxsize)) { x = 0; } //draw aditional image if (x > (canvasxsize-imgw)) { ctx.drawimage(img, x-canvasxsize+1, y, imgw, imgh); } } //if image > canvas size else { //reset, start beginning if (x > (canvasxsize)) { x = canvasxsize-imgw; } //draw aditional image if (x > (canvasxsize-imgw)) { ctx.drawimage(img[0],x-imgw+1,y,imgw,imgh); } } for(i = 0; < img.length; i++) { ctx.drawimage(img[i],x,y,imgw,imgh); //amount move x += dx; } }
to have multiple images loaded when need them, shoud use image preloader code:
var imgs=[]; var imagesok=0; var imageurls=[]; imageurls.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house1.jpg"); imageurls.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house2.jpg"); imageurls.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house3.jpg"); loadallimages(); function loadallimages(){ (var = 0; < imageurls.length; i++) { // put each image in imgs array var img = new image(); imgs.push(img); // after each image has been loaded, execute function img.onload = function(){ // add 1 imagesok imagesok++; // if imagesok equals # of images in imgs // have preloaded images // imgs[] if (imagesok>=imageurls.length ) { // loaded--start drawing images drawimages(); } }; // end onload img.src = imageurls[i]; } // end } at point images loaded, draw images
you can use context.translate , context.rotate tilt images.
what translate (move) center of image want rotate. rotation centerpoint. way image rotate around center. rotate function takes radian angle can translate degrees radians this: 30 degrees = 30 * math.pi/180 radians
ctx.translate( left+width/2, topp+height/2 ) ctx.rotate( degrees*math.pi/180 ); then draw image offset centerpoint (remember you’re rotating around centerpoint)
ctx.drawimage(img,0,0,img.width,img.height,-width/2,-height/2,width,height); it’s lot wrap head around here’s example code , fiddle: http://jsfiddle.net/m1erickson/t49ku/
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <style> body{ background-color: ivory; } canvas{border:1px solid red;} </style> <script> $(function(){ var canvas=document.getelementbyid("canvas"); var ctx=canvas.getcontext("2d"); var imgs=[]; var imagesok=0; var imageurls=[]; imageurls.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house1.jpg"); imageurls.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house2.jpg"); imageurls.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house3.jpg"); loadallimages(); function loadallimages(){ (var = 0; < imageurls.length; i++) { var img = new image(); imgs.push(img); img.onload = function(){ imagesok++; if (imagesok>=imageurls.length ) { drawimages(); } }; // end onload img.src = imageurls[i]; } // end } ctx.linewidth=2; var left=25; var topp=30; var width=100; var height=100; var rotations=[ -10, 0, 10 ]; function drawimages(){ for(var i=0;i<imgs.length;i++){ var img=imgs[i]; ctx.save() ctx.beginpath(); ctx.translate( left+width/2, topp+height/2 ) ctx.rotate(rotations[i]*math.pi/180); ctx.drawimage(img,0,0,img.width,img.height,-width/2,-height/2,width,height); ctx.rect(-width/2,-height/2,width,height); ctx.stroke(); ctx.restore(); left+=125; } } }); // end $(function(){}); </script> </head> <body> <canvas id="canvas" width=400 height=200></canvas> </body> </html> 
Comments
Post a Comment