重複的移動模式？

我已經開始學習HTML5中的Canvas，並且我有一個問題。重複的移動模式？

我想重複創建一個可移動的模式。（類似於CSS中背景位置和背景重複。）

我該怎麼做？

我需要這個爲我的項目創建一個動畫背景。

2012-10-22 Siper

即使世界一些方法來實現這一目標，你可以使用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); 
}

來源

2012-10-22 20:54:12 Loktar

你可以做這樣的事情。首先使用setInterval（）創建一個用於移動和觸發該函數的函數setInterval方法是用於計時事件的窗口對象。它會在指定的毫秒數內反覆執行函數或表達式。

你可以參考post.I創建的示例蛇遊戲使用html5畫布和音頻。 http://www.arungudelli.com/2012/10/html5-canvas-example-snake-game.html

來源

2012-10-22 19:37:02 Arun

您可以使用CSS3爲背景圖案設置動畫效果。您可以在動畫上疊加其他畫布元素，並通過切換類來控制JavaScript的動畫。

example jsfiddle（fullscreen）

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; } 
}

也參見：

support is widely available (sans IE < 10)

IE瀏覽器支持，你可以使用類似這樣canvas animation template

來源

2012-10-22 20:10:40 MikeM

重複的移動模式？

回答

相關問題