HTML5 Canvas-將Canvas元素作為圖案重復

Question

我有一個64x64畫布正方形元素，我想在x和y方向上重復以填充頁面。 我已經找到了很多關於如何對圖像執行此操作的解釋，但沒有解釋如何對canvas元素進行操作。 到目前為止，這是我的代碼：

$(document).ready(function(){
    var canvas = document.getElementById('dkBg');
    var ctx = canvas.getContext('2d');  
    ctx.canvas.width  = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
    ctx.fillStyle = 'rgb(0,0,0)';
    //I want the following rectangle to be repeated:
    ctx.fillRect(0,0,64,64);
    for(var w=0; w<=64; w++){
            for(var h=0; h<=64; h++){
                    rand = Math.floor(Math.random()*50);
                    while(rand<20){
                            rand = Math.floor(Math.random()*50);
                    }
                    opacity = Math.random();
                    while(opacity<0.5){
                            opacity = Math.random();
                    }
                    ctx.fillStyle= 'rgba('+rand+','+rand+','+rand+','+opacity+')';
                    ctx.fillRect(w,h,1,1);
            }
    }
});

問題是，我不想重新生成所有的隨機數/等。 我只想平鋪完全相同的正方形以適合頁面。 這可能嗎？

這是一個小提琴： http : //jsfiddle.net/ecMDq/

Answer 1

做您想做的事實際上非常容易。 您根本不需要使用圖像 。 createPattern函數接受圖像或其他畫布！ （甚至是視頻標簽）

您所要做的就是制作一個只有64x64大的畫布，並在其上制作圖案。 讓我們稱之為畫布pattern 。 您只需要設計一次。

然后，在主畫布的上下文中，我們可以執行以下操作：

// "pattern" is our 64x64 canvas, see code in fiddle
var pattern = ctx.createPattern(pattern, "repeat");
ctx.fillStyle = pattern;

使用您的代碼制作模式，然后將其重復到500x500畫布上的工作示例：

http://jsfiddle.net/tGa8M/

Answer 2

您可以使用canvas元素的toDataURL（）方法獲取圖像的base64版本。

從那里開始，只需將頁面的背景圖像設置為字符串"url(" + base64 + ")"

這是一個工作示例： http : //jsfiddle.net/ecMDq/1/

$(document).ready(function(){
    var canvas = document.getElementById('dkBg');
    var ctx = canvas.getContext('2d');  
    ctx.canvas.width  = 64; //window.innerWidth;
    ctx.canvas.height = 64; //window.innerHeight;
    ctx.fillStyle = 'rgb(0,0,0)';
    //I want the following rectangle to be repeated:
    ctx.fillRect(0,0,64,64);
    for(var w=0; w<=64; w++){
            for(var h=0; h<=64; h++){
                    rand = Math.floor(Math.random()*50);
                    while(rand<20){
                            rand = Math.floor(Math.random()*50);
                    }
                    opacity = Math.random();
                    while(opacity<0.5){
                            opacity = Math.random();
                    }
                    ctx.fillStyle= 'rgba('+rand+','+rand+','+rand+','+opacity+')';
                    ctx.fillRect(w,h,1,1);
            }
    }

    document.documentElement.style.backgroundImage = 
        'url(' +canvas.toDataURL() + ')';

});

請注意，您需要將畫布制作為64x64，因為這是源圖像的大小。 現在，您還可以使canvas display:none ，甚至可以將其從dom中完全刪除，因為它僅用作背景圖像的來源。

另外，那些while循環到底是怎么回事？

while(rand<20){
        rand = Math.floor(Math.random()*50);
}

看來您要強制執行最小值。 只需使用此：

rand = Math.floor(Math.random() * (50-20) + 20);