2

HTML5 で Canvas の学習を開始しましたが、質問があります。

リピートで動くパターンを作りたい。(CSS の background-position や background-repeat のようなもの。)

これどうやってするの？

プロジェクトのアニメーション背景を作成するには、これが必要です。

4

3 に答える 3

1

これを実現する方法はputImageDataいくつかありますが、パフォーマンスが低下する可能性があります。最適な方法は を使用することdrawImageです。また、2 番目のメソッドには、左から右、または右から左に移動するコードがあることに注意してください。

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-22T20:54:12.593 に答える
0

このようなことができます。最初に移動用の関数を 1 つ作成し、setInterval() を使用してその関数をトリガーします。 setInterval メソッドは、タイミング イベントのウィンドウ オブジェクトです。指定されたミリ秒数で関数または式を何度も実行します。

投稿を参照できます。html5 キャンバスとオーディオを使用してサンプル スネーク ゲームを作成しました。 http://www.arungudelli.com/2012/10/html5-canvas-example-snake-game.html

于 2012-10-22T19:37:02.303 に答える
0

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

以下も参照してください。

サポートは広く利用可能です (sans IE < 10)

IE サポートの場合、このキャンバス アニメーション テンプレートのようなものを使用できます

于 2012-10-22T20:10:40.093 に答える