javascript - HTML5 Canvas - Repeat Canvas Element as a Pattern - Stack Overflow

admin管理员组

文章数量:1356575

I have a 64x64 canvas square element which I want to repeat in x- and y-directions to fill the page. I've found many explanations on how to do this with an image, but none explaining how to do it with a canvas element. Here is my code so far:

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

The thing is, I don't want all of the random numbers/etc to be regenerated. I just want to tile the exact same square to fit the page. Is this possible?

Here is a fiddle: /

I have a 64x64 canvas square element which I want to repeat in x- and y-directions to fill the page. I've found many explanations on how to do this with an image, but none explaining how to do it with a canvas element. Here is my code so far:

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

The thing is, I don't want all of the random numbers/etc to be regenerated. I just want to tile the exact same square to fit the page. Is this possible?

Here is a fiddle: http://jsfiddle/ecMDq/

• javascript
• html
• canvas

Share Improve this question Follow edited Mar 27 at 21:18 pjpscriv 1,27911 gold badge1515 silver badges3030 bronze badges asked Feb 1, 2012 at 19:02 HellaMadHellaMad 5,40466 gold badges3333 silver badges5454 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Doing what you want is actually super easy. You do not need to use images at all. The createPattern function accepts an image or another canvas! (Or a video tag, even)

All you have to do is make a canvas that is only 64x64 large and make the pattern on it. Let's call this canvas pattern. You only have to make your design once.

Then with the context of the main canvas we can do:

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

Working example using your code to make the pattern, then repeating it onto a 500x500 canvas:

http://jsfiddle/tGa8M/

You can get the base64 version of your image using the toDataURL() method of the canvas element.

From there it's as simple as setting the background-image of your page to the string "url(" + base64 + ")"

Here is a working example: http://jsfiddle/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() + ')';

});

Note that you need to make the canvas 64x64 because that's the size of your source image. You can also now make the canvas display:none, or even remove it from the dom pletely because it's only acting as a source for the background-image.

Also, what on earth is up with those while loops?

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

It looks like you're trying to enforce a minimum value. Just use this:

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

本文标签： javascriptHTML5 CanvasRepeat Canvas Element as a PatternStack Overflow