jQuery를 사용하여 x 초 후 캔버스 부분 제거

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

예를 들어 나는 캔버스가 200x300입니다. jquery를 사용하여 x 초 후에 캔버스의 임의의 10x10 사각형을 숨긴 다음 x 초마다 그렇게 계속합니다.jQuery를 사용하여 x 초 후 캔버스 부분 제거

div는 모두 하나의 크기이거나 10x10과 동일한 div를 만든 다음 연결해야하기 때문에 가능합니까?

출처

2014-05-18 user3297875

허, 무엇? 캔버스를 다시 그릴 수 있고 원하는대로 그릴 수 있지만 캔버스가 아닌 HTML 요소의 무작위 부분을 숨길 수는 없습니까? – adeneo

jQuery를 사용하여 캔버스의 일부를 숨길 수 없습니다.

자바 스크립트를 사용하여 캔버스의 일부를 숨길 수 있습니다.

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

출처

2014-05-18 18:05:28 markE

이것은 정말로 도움이되었습니다. 고맙습니다! – user3297875

jQuery를 사용하여 x 초 후 캔버스 부분 제거

답변

관련 문제