Слайд-шоу-баннер (эффект: удаление изображений через границы холста)

Я пытаюсь создать баннер, подобный вышеупомянутому, постоянно меняя 2 изображения и используя их как fillStyle (шаблон) на буферном холсте. Идея состоит в том, чтобы image1 следовал за image2 с таким количеством пикселей, как ширина холста, и обновлял их положение одновременно на буферном холсте, прежде чем рисовать на холсте, видимом на моей странице. И, конечно же, когда одно изображение выходит за границы, устанавливается новый источник для этого изображения, в то время как его позиция x устанавливается на отрицательное число пикселей, равное ширине холста.

Значения, которые я использую для x_incr, могут показаться загадочными, но они являются лишь временными, произвольными значениями, которые обеспечивают плавную, увеличивающуюся скорость, поскольку я еще не нашел лучшего способа имитировать этот эффект.

Я работал с одним изображением, но теперь, когда я добавил другое, мой холст постоянно черный во время работы скрипта. Почему это происходит? И я все об этом не так? Может ли быть лучше получить / сохранить с помощью CSS3 преобразований?

Я довольно плохо знаком со всеми языками, которые я здесь использую, но я пытался следовать стандартам, которые я знаю.

Пожалуйста, дайте мне знать, если части следующего кода являются избыточными по отношению к моему вопросу.

Заранее спасибо!

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 does 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;
}
Источник

0 ответов

Другие вопросы по тегам