canvas轮播效果

Html

Css

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var number = 0,
    paused = false,
    color;
var img1 = new Image(),
    img2 = new Image(),
    img3 = new Image();
img1.src = 'http://www.jq22.com/img/cs/500x500-1.png';
img2.src = 'http://www.jq22.com/img/cs/500x500-2.png';
img3.src = 'http://www.jq22.com/img/cs/500x500-3.png';
var images = [img1, img2, img3];
window.canvas.onmouseover = function() {

paused = true;
}
window.canvas.onmouseout = function() {
    paused = false;
}

function animate() {
    if (!paused) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawGrid();
        drawText();
        number++;
    }
    setTimeout(animate, 3000);
}

function drawGrid() {
    if (number == 3) {
        number = 0;
    }
    context.drawImage(images[number], 0, 0);
}

function drawText() {

context.font = '14px Georgia';
    for (var i = 0; i < 3; i++) {
        if (i == number) {
            color = "rgba(255,0,0,0.4)";
        } else {
            color = "rgba(255,255,255,0.5)"
        }
        context.fillStyle = color;
        context.fillRect(360 + i * 40, 460, 20, 20);
        context.fillStyle = "rgba(0,0,0,0.8)";
        context.textAlign = 'center';
        context.textBaseline = 'middle';
        context.fillText(i + 1 + "", 370 + i * 40, 470);
    }
}
animate();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas轮播效果



代码描述：canvas轮播效果

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

不知道起什么名字才吸引人

相关代码

canvas轮播效果

最新