Question

我通过以设定的时间间隔克隆它们来动态创建HTML5画布对象。现在，我需要让它们在到达屏幕末尾后消失。这是我用来创建画布对象的代码。 HTML代码

<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>

<br><br>
<script src="myjs1.js"></script>         
<canvas id="test" class="test"></canvas>          
</body>
</html>

MYJS1.JS档案

$(document).ready(function(){

var c = document.getElementById("test");
var ctx=c.getContext("2d");
var h=ctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';    
ctx.fillRect(20, 20, 150, 100);
    ctx.font="30px Arial";

    ctx.fillText(0,250,75);
            ctx.stroke();



setInterval(function() {
     var el = $("#test"),  
     newone = el.clone(true);
     el.before(newone);


},5000);

var i=0;

setInterval(function() {
    i++;
var e = document.getElementById("test");
var ctx2 = e.getContext("2d");
ctx2.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';    
ctx2.fillRect(20, 20, 150, 100);

        ctx2.font="30px Arial";
    ctx2.fillText(i,250,75 );
    ctx2.stroke();
},5000);
});

如果我使用下面的代码，它会阻止在给定条件之后创建块，而不会使第一个创建的块消失。

if(i>10){
$('#test:first').remove();
}

'#test:last'也会得到相同的结果。有人可以帮帮我。

如何在到达屏幕末尾后隐藏动态创建的画布对象

0 个答案: