2012-03-07 12 views
0

あなたの誰かが私を助けることができるかどうか疑問に思っていたキャンバスを別のアニメーション用にクリアするにはどうすればよいですか?

私は広告を作成し、右からテキストを飛ばしたいと思っています。

これまでのところ、私はそれを行うことができましたが、キャンバスを再アニメーション化することはできません。ここで

は、これまでの私のコードです:感謝任意の助け

<canvas id="canvas" width="800" height="200">Your browser doesn't support the canvas. <br/> I appologise for any inconvenience. 

</canvas> 

<script type = "text/javascript"> 

    //Set up the canvas 
    var the_canvas_element = document.getElementById("canvas"); 
    var the_canvas = the_canvas_element.getContext("2d"); 

    //Start Variables 
    var x = 800; 

    //Start animation timing 
    var int = setInterval(draw,10); 

    var ljmulogo = new Image(); 
    { 
     ljmulogo.src = 'C:\Users\Chad\Documents\My Web Sites\CWK 2\Part A\Images\ljmu_logo.png' 
     setInterval (draw,100) 
    } 

    function draw() 
    { 
     //Clear canvas 
     the_canvas.clearRect(0,0,800,200); 

     //Draw text 
     the_canvas.fillStyle = "#000000"; 
     the_canvas.font = "24pt arial"; 
     the_canvas.fillText("Welcome to:",x,30); 

     the_canvas.fillStyle = "#000000"; 
     the_canvas.font = "bold 24pt arial"; 
     the_canvas.fillText("Liverpool John Moores University",x,70); 

     the_canvas.fillStyle = "#000000"; 
     the_canvas.font = "32pt arial"; 
     the_canvas.fillText("Computer Forensics",x,150); 


     //Check if at the end 
     if (x<=20) 
     { 
      //End animation 
      int = clearInterval(int); 
     } 
     else 
     { 
      //bring text in further 
      x = x -2; 
     } 

    } 


</script> 

どうもありがとう、:)

答えて

0

私はここで何が起こっているかわからないんだけど、それが有効になりません。

var ljmulogo = new Image(); 
{ 
    ljmulogo.src = 'C:\Users\Chad\Documents\My Web Sites\CWK 2\Part A\Images\ljmu_logo.png' 
    setInterval (draw,100) 
} 

新しいイメージを作成するには、これを試してみてください。

//This code outside the draw loop 
var ljmulogo = new Image(); 
ljmulogo.src = 'ljmu_logo.png'; 

//This code inside the draw loop 
ctx.drawImage(ljmulogo, 0, 0); 

(setInterval(draw、100)を削除してください。すでに100の値がかなり高いsetInterval +があります)。

関連する問題