Ändern Sie die Größe eines Bildes mit Javascript, um es in einer Zeichenfläche zu verwenden. CreatePattern

Ich habe ein paar Tricks gesehen, wie Sie die Größe eines Bildes ändern, das Sie in einem IMG-Tag verwenden möchten, aber ich möchte eine Bildvariable in einem Javascript haben, die Größe ändern und das Bild dann in einem context.createPattern (image, " wiederholen"). Ich habe keinen Hinweis gefunden, wie das geht.

Eine funktionale Demo finden Sie unterhttp://karllarsson.batcave.net/moon.html mit Bildern darüber, was ich machen will.

Die Lösung von Loktar sieht gut aus. Ich hatte noch keine Zeit, den richtigen Aspekt zu korrigieren, aber jetzt weiß ich, wie es geht. Vielen Dank noch mal. Hier ist eine funktionierende Demohttp://karllarsson.batcave.net/moon2.html

Dies sind die zwei Zeilen, die ich nicht zur Arbeit bekomme, wie ich sie auch will.

image.width = side * 2;
image.height = side * 2;

function drawShape() {
    try {
        var canvas = document.getElementById('tutorial');                 
        var image = new Image();                                          
        image.src = "http://xxx.yyy.zzz/jjj.jpg";                         
        image.width = side * 2;                                           
        image.height = side * 2;                                          

        if (canvas.getContext){
            var ctx = canvas.getContext('2d');                            
            ctx.clearRect(0, 0, canvas.width, canvas.height);             
            ctx.fillStyle = ctx.createPattern(image, "repeat");           
            ctx.beginPath();                                              
            var centerX = canvas.width / 2 - side / 2;                    
            var centerY = canvas.height / 2 - side / 2;                   
            ctx.rect(centerX, centerY, side, side);                       
            ctx.fill();                                                   
        } else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');   
        }
    } catch (err) {
        console.log(err);                                                 
    }
}

Antworten auf die Frage(1)

Ihre Antwort auf die Frage