Question

<div id="div"><canvas height="200" width="300" id="canvas"></canvas></div>

例如，我有一个200x300的画布。有没有办法使用jquery在x秒后隐藏一个随机的10x10平方的画布，然后每隔x秒继续这样做。

这是可能的，因为div只有一个尺寸，或者我需要用10x10创建相同的div然后连接它们吗？

Answer 1

您无法使用jQuery隐藏画布的某些部分。

您可以使用javascript隐藏画布的某些部分。

创建一个单元格数组，表示每个要隐藏的10x10像素正方形的左上角（x，y）。
随机改组该数组（这会导致选择随机方块进行隐藏）。
运行一个循环，使用context.clearRect在经过的时间过后删除一个方格。

演示：http://jsfiddle.net/m1erickson/gnebs/

enter image description here

带注释的示例代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // a variable to hold when the last square was removed
    var lastTime;

    // a variable to declare that squares are removed 
    // every 15/60th of second
    var interval=(1000/60)*15;  // hide a cell every quarter of a second

    // variables defining the squares to be removed
    var cells=[];
    var cellWidth=10;
    var cellHeight=10;
    var colCount=parseInt(canvas.width/cellWidth);
    var rowCount=parseInt(canvas.height/cellHeight);

    // add 1 more row-cell or col-cell if the cells don't 
    // completely fill the canvas
    if(colCount*cellWidth<canvas.width){colCount++;}
    if(rowCount*cellHeight<canvas.height){rowCount++;}

    // just testing...load an image that will have squares hidden
    var img=new Image();
    img.onload=start;
    img.src="https://dl.dropboxusercontent.com/u/139992952/multple/bigben.jpg";
    function start(){

        // draw an image on the canvas
        ctx.drawImage(img,0,0);

        // create an array representing the top-left x,y 
        // of each cell to be hidden
        for(var x=0;x<colCount;x++){
        for(var y=0;y<rowCount;y++){
            cells.push({x:x*cellWidth,y:y*cellHeight});
        }}

        // randomize the array so we hide cells in random order
        cells = shuffle(cells);

        // start the animation loop that removes cells
        requestAnimationFrame(animate);

    }


    function animate(currentTime){

        // check if there are any more cells left to hide 
        // after we hide this one
        if(cells.length>1){
            // if Yes, request another animation loop 
            requestAnimationFrame(animate);
        }else{
            // if No, the animation stops
            $("#results").text("All cells have been hidden");
        }

        // initialize 'lastTime' if this is the first time in the loop
        if(!lastTime){ lastTime=currentTime; }    

        // calculate the elapsed time
        var elapsed=currentTime-lastTime;

        // if insufficient time has elapsed, don't do anything
        if(elapsed<interval){ return; }

        // restart the elapsed timer
        lastTime=currentTime;

        // sufficient time has elapsed, so grab the
        // last cell from the randomized cells[] array
        var cell=cells.pop();

        // clear the cell
        ctx.clearRect(cell.x,cell.y,cellWidth,cellHeight);

    }

    // Utility functions

    // shuffle an array in semi-random order
    function shuffle(o){
        for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        return o;
    };

}); // end $(function(){});
</script>
</head>
<body>
    <h4 id="results">Hiding 10x10 cells every 16ms</h4>
    <canvas id="canvas" width=300 height=200></canvas>
</body>
</html>

使用jQuery在x秒后删除部分画布

1 个答案: