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);
            }
    }
});

问题是，我不希望重新生成所有随机数/ etc。我只想平铺完全相同的方块以适应页面。这可能吗？

这是一个小提琴：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，因为这是源图像的大小。您现在也可以制作画布display:none，甚至可以将它从dom中完全删除，因为它只是作为背景图像的来源。

另外，那些在循环中究竟是什么呢？

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

看起来你正试图强制实施最低价值。只需使用：

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

HTML5画布 - 重复画布元素作为模式

2 个答案: