javascript - Slideshow-banner (effect: easing images out through canvas border) -
i'm trying create banner such above mentioned swapping out 2 images , using them fillstyle (pattern) on buffer canvas. idea have image1 trail behind image2 many pixels width of canvas, , update position simultaneously on buffer canvas before drawing on canvas visible on page. , of course, when 1 image moves out of border, new source image set while x position set negative many pixels width of canvas.
the values i'm using x_incr might seem mysterious, they're temporary, arbitrary values makes smooth, increasing speed haven't yet found better way simulate effect.
i had working 1 image, added another, canvas black while script running. why happening? , going wrong? might better obtained/maintained css3 transformations?
i'm pretty new of languages i'm using here, i've tried follow standards know.
please let me know if parts of following code redundant in regards question.
thanks in advance!
javascript:
var pattern1; var pattern2; var x1 = 0.1; var x2 = 0.1; var x1_incr = 0.1; var x2_incr = 0.1; var canvas = null; var context = null; var buffercanvas = null; var buffercanvasctx = null; var img1 = new image(); var img2 = new image(); var currentimg = 0; var imgarray = [ "images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg" ]; function init () { canvas = document.getelementbyid('canvas1'); context = canvas.getcontext("2d"); buffercanvas = document.createelement("canvas"); buffercanvasctx = buffercanvas.getcontext("2d"); buffercanvasctx.canvas.width = context.canvas.width; buffercanvasctx.canvas.height = context.canvas.height; loadpattern(img1, pattern1); loadpattern(img2, pattern2); switchimage(img1); draw(); setinterval(animate, 10); } function loadpattern(image, pattern) { image.onload = function () { pattern = buffercanvasctx.createpattern(image, "no-repeat"); }; } function switchimage(obj) { obj.setattribute('src', imgarray[currentimg++]); if (currentimg >= imgarray.length) { currentimg = 0; } } function animate () { update(img1, x1, x1_incr); update(img2, x2, x2_incr); draw(); } function update (image, x, x_incr) { x_incr += 0.1; x += x_incr; if (x > context.canvas.width) { switchimage(image); x = -context.canvas.width; x_incr = 0.1; } } function draw() { context.save(); if (x1 < x2) { buffercanvasctx.fillstyle = pattern1; buffercanvasctx.fillrect(x1, 0, context.canvas.width, context.canvas.height); buffercanvasctx.fillstyle = pattern2; buffercanvasctx.fillrect(x2, 0, context.canvas.width, context.canvas.height); } else { buffercanvasctx.fillstyle = pattern2; buffercanvasctx.fillrect(x2, 0, context.canvas.width, context.canvas.height); buffercanvasctx.fillstyle = pattern1; buffercanvasctx.fillrect(x1, 0, context.canvas.width, context.canvas.height); } context.drawimage(buffercanvas, 0, 0, context.canvas.width, context.canvas.height); context.restore(); } } html:
<!doctype html> <html lang="en"> <head> <title>home</title> <link href="mypage.css" rel="stylesheet" type="text/css"> </head> <body onload="init()"> <div class="container"> <canvas id="canvas1" class="slideshow">your browser not support canvas.</canvas> </div> <script src="mypage.js"> </script> </body> </html> css:
.container { margin: auto; width: 1024px; } .slideshow { background-color: lightgray; height: 90px; width: 728px; margin: 0 auto 0 auto; display: block; }
Comments
Post a Comment