Question

想知道你们有没有人能帮助我

我必须创建一个广告，并希望从右侧播放文字。

到目前为止，我已经设法做到了，但无法清除画布以进行恢复。

到目前为止，这是我的代码：

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

非常感谢任何帮助，非常感谢：）

Answer 1

我不确定这里发生了什么，看起来不合适：

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），因为你已经有一个setInterval +那100个值非常高）。

如何清除另一个动画的画布？

1 个答案: