Javascript 幻灯片横幅（效果：通过画布边框使图像轻松显示）_Javascript_Css_Canvas_Slideshow_Banner

Javascript 幻灯片横幅（效果：通过画布边框使图像轻松显示）

javascript css canvas

Javascript 幻灯片横幅（效果：通过画布边框使图像轻松显示）,javascript,css,canvas,slideshow,banner,Javascript,Css,Canvas,Slideshow,Banner,我正试图创建一个像上面提到的那样的横幅，通过不断地交换2个图像，并在缓冲区画布上使用它们作为fillStyle（模式）。我们的想法是让image1在image2之后跟踪，像素数与画布宽度一样多，并在我的页面上可见的画布上绘制之前，同时更新它们在缓冲区画布上的位置。当然，当一个图像移出边界时，会为该图像设置一个新的源，而其x位置设置为画布宽度的负像素数我在x_incr中使用的值可能看起来很神秘，但它们只是临时的、任意的值，有助于平滑、提高速度，因为我还没有找到更好的方法来模拟这种效果我让它处理

我正试图创建一个像上面提到的那样的横幅，通过不断地交换2个图像，并在缓冲区画布上使用它们作为

fillStyle

（模式）。我们的想法是让image1在image2之后跟踪，像素数与画布宽度一样多，并在我的页面上可见的画布上绘制之前，同时更新它们在缓冲区画布上的位置。当然，当一个图像移出边界时，会为该图像设置一个新的源，而其x位置设置为画布宽度的负像素数

我在x_incr中使用的值可能看起来很神秘，但它们只是临时的、任意的值，有助于平滑、提高速度，因为我还没有找到更好的方法来模拟这种效果

我让它处理1个图像，但现在我添加了另一个，我的画布在脚本运行时一直是黑色的。为什么会这样？我是不是完全错了？使用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();
    }
}

任何反馈都将不胜感激！

<!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>

.container {
    margin: auto;
    width: 1024px;
}

.slideshow {
    background-color: lightGray;
    height: 90px;
    width: 728px;
    margin: 0 auto 0 auto;
    display: block;
}