使用jQuery在x秒後刪除部分畫布

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

例如，我有一個200x300的畫布。有沒有一種方法可以在x秒的時間後使用jquery隱藏任意10x10平方的畫布，然後每x秒鐘繼續這樣做。使用jQuery在x秒後刪除部分畫布

這是可能的，因爲div是所有的大小，或者我需要創建10x10的同一個div，然後連接它們嗎？

來源

2014-05-18 user3297875

嗯，什麼？您可以重繪畫布並繪製幾乎任何您想要的畫布，但是您無法隱藏HTML元素的任意部分，甚至不能隱藏畫布？ – adeneo

您無法使用jQuery隱藏畫布的各個部分。

您可以使用javascript隱藏畫布的各個部分。

創建一個單元格數組，表示要隱藏的每個10x10px平方的左上角（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>

來源

2014-05-18 18:05:28 markE

這真的很有幫助。謝謝！ – user3297875

使用jQuery在x秒後刪除部分畫布

回答

相關問題