html - 重复的可移动模式？

Question

我已经开始在 HTML5 中学习 Canvas 并且我有一个问题。

我想创建一个重复的可移动模式。（类似于 CSS 中的 background-position 和 background-repeat 。）

我怎样才能做到这一点？

我需要这个来为我的项目创建动画背景。

score 1 · Accepted Answer

您可以使用几种方法来实现这一点，putImageData但您会遭受一些性能损失，最好的方法是使用drawImage. 另请注意，第二种方法具有使其从左到右或从右到左的代码。

http://www.somethinghitme.com/projects/bgscroll/scrolldrawimage.html

var ctx = document.getElementById("canvas").getContext("2d"),
    canvasTemp = document.createElement("canvas"),
    scrollImg = new Image(),
    tempContext = canvasTemp.getContext("2d"),
    imgWidth = 0,
    imgHeight =0,
    imageData = {},
    canvasWidth = 600,
    canvasHeight = 240,
    scrollVal = 0,
    speed =2;

    scrollImg.src = "citybg.png";
    scrollImg.onload = loadImage;

function loadImage(){
    imgWidth = scrollImg.width,
    imgHeight = scrollImg.height;
    canvasTemp.width = imgWidth;
    canvasTemp.height =  imgHeight;    
    render();                
}

function render(){
    ctx.clearRect(0,0,canvasWidth,canvasHeight);

    if(scrollVal >= canvasWidth){
        scrollVal = 0;
    }

    scrollVal+=speed;                   
    ctx.drawImage(scrollImg,canvasWidth-scrollVal,0,scrollVal,imgHeight, 0, 0, scrollVal,imgHeight);
    ctx.drawImage(scrollImg,scrollVal,0,imgWidth, imgHeight);

     // To go the other way instead
     ctx.drawImage(scrollImg,-scrollVal,0,imgWidth, imgHeight);
     ctx.drawImage(scrollImg,canvasWidth-scrollVal,0,imgWidth, imgHeight);

    setTimeout(function(){render();},10);
}

score 0 · Accepted Answer

你可以做这样的事情。首先创建一个用于移动的函数，并使用 setInterval() 触发该函数 setInterval 方法是定时事件的窗口对象。它在指定的毫秒数内一遍又一遍地执行一个函数或一个表达式。

您可以参考帖子。我使用 html5 画布和音频创建了示例蛇游戏。 http://www.arungudelli.com/2012/10/html5-canvas-example-snake-game.html

score 0 · Accepted Answer

您可以使用 CSS3 为背景图案设置动画。您可以在动画顶部覆盖其他画布元素，并通过切换类使用 JavaScript 控制动画。

示例 jsfiddle（全屏）

body {
    background:url('http://pattern8.com/images/pattern-thumbs/pattern8-pattern-61c.png');    
}

body.scrollbg {
    -webkit-animation: scrollbg   6s cubic-bezier(.4,0,.2,1) infinite;
    ...(moz,ms,o vendor prefixes)...
    animation: scrollbg   6s cubic-bezier(.4,0,.2,1) infinite;
}

@-webkit-keyframes scrollbg {
      0% { background-position: left  top,    left  top; }
     25% { background-position: right top,    left  bottom; }
     50% { background-position: right bottom, right bottom; }
     75% { background-position: left  bottom, right top; }
    100% { background-position: left  top,    left  top; }
}

也可以看看：

支持广泛可用（无 IE < 10）

对于 IE 支持，您可以使用类似这样的画布动画模板

html - 重复的可移动模式？

3 回答 3

Related

Reference