需要繪製/動畫一個小方形背景圖像，然後通過x和y重複它

基本上，我想繪製一個小方形，然後再繪製另一個，然後另一個，直到它填滿屏幕水平和垂直。我想實際看到正在繪製的每個方塊的動畫。需要繪製/動畫一個小方形背景圖像，然後通過x和y重複它

我不知道如何做到這一點。我知道HTML畫布有一個createPattern函數，但我認爲它使用了一個圖像，我需要這些方塊來一個接一個地鏈接（並非全部）。

任何想法？

使用jquery，canvas，svg，css3，html5或可能是流行的svg或js庫的解決方案都很好。

2014-07-22 RiddleMeThis

這是你想要的結果？

<html> 
<head> 
<script> 
var sq_size=10; 
var sq_pos_x = 0-sq_size;//see comment in drawtick 
var sq_pos_y = 0; 
var can_width=800; 
var can_height=600; 
var tmr; 
function startTimer(){ 
tmr = setInterval(function(){drawtick()}, 20); 
} 
function drawtick(){ 
var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
//the first drawn square should not be on x+ sq_size 
// instead of adding an extra if statement, I just initialized it on -sq_size 
if(sq_pos_x+sq_size>=can_width)    {sq_pos_y=sq_pos_y+sq_size;sq_pos_x=0}else{sq_pos_x=sq_pos_x+sq_size;} 
if(sq_pos_y>=can_height){clearInterval(tmr);alert('loop ended');} 
ctx.rect(sq_pos_x,sq_pos_y,sq_size,sq_size); 
ctx.stroke(); 
} 
</script> 
</head> 
<body onload="startTimer()"> 
<canvas id="myCanvas" width="800" height="600" style="border:1px solid #000000;"> 
Your browser does not support the HTML5 canvas tag. 
</canvas> 
</body> 
</html>

或

http://jsfiddle.net/kKyA5/

它的平局動畫

來源

2014-07-22 06:56:55 dwana

感謝您的回覆。這實際上非常接近，至少是我想要的一般想法。我的最終目標是逐步繪製像[THIS]這樣的背景（http://i.imgur.com/uttzTqc.jpg）。我可能需要設置幾個不同的顏色變量並隨機填充正方形。我可能能夠從你提供的內容開始工作。 – RiddleMeThis

第一個例子更接近我所尋找的。 – RiddleMeThis

你應該嘗試oCanvas，它是面向對象的javascript，它基於html5畫布標籤進行繪製，它可以讓你做一些漂亮的東西，並處理動畫。基本上你需要用這樣一個ID定義的canvas標籤：

<canvas id="canvas" width="354" height="100"></canvas>

，然後實例化核心對象：

var canvas = oCanvas.create({ 
    canvas: "#canvas", 
    background: "#0cc" 
});

之後，你可以用這樣的畫正方形：

var limit = 50; 
var reduction = 2; //minus two pixels for iteration 
var width = 202; 
var height = 202; 
for (var i = 1; i <= limit; ++i){ 

var rectangle = canvas.display.rectangle({ 
    x: 77, 
    y: 77, 
    width: width, 
    height: height, 
    fill: "#0aa" 
    }); 
width = width - reduction; 
height = width - reduction; 

canvas.addChild(rectangle,false); 

}

再畫一次全部：

canvas.draw.redraw();

或者你可以animate太

而且它還有documented

來源

2014-07-22 01:35:11 Typo

感謝您的回答所有depense。上面的代碼不會在上面畫50個方格嗎？另外，什麼是var減少= 2; //減去迭代線的兩個像素爲？ – RiddleMeThis

@ user3204142這只是一個例子，不要使用它。這畫出了同心圓的正方形，我認爲這就是你需要的。 – Typo

需要繪製/動畫一個小方形背景圖像，然後通過x和y重複它

回答

相關問題