使用javascript调整图像大小以在canvas createPattern中使用

Question

我已经看到了一些关于如何调整想要在IMG标签内使用的图像的技巧,但我希望在Javascript中有一个图像变量,调整它的大小然后在context.createPattern中使用图像(图像,"重复").我没有找到任何暗示如何做到这一点.

您可以在http://karllarsson.batcave.net/moon.html找到一个功能演示, 其中包含我想要做的图像.

Loktar的解决方案看起来不错.我还没有时间来修正正确的方面,但现在我知道该怎么做了.再一次谢谢你.这是一个有效的演示http://karllarsson.batcave.net/moon2.html

这是我无法工作的两条线,因为我也想要它们.

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

Answer 1

你可以做的是制作一个临时画布,然后用你需要的尺寸将图像复制到它,然后使用那个临时画布作为图案而不是图像本身.

现场演示

首先创建画布

          var tempCanvas = document.createElement("canvas"),
              tCtx = tempCanvas.getContext("2d");

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

现在将图像绘制到它,使您需要缩放的大小

          tCtx.drawImage(image,0,0,image.width,image.height,0,0,side*2,side*2);

现在使用刚刚创建的画布作为模式

          ctx.fillStyle = ctx.createPattern(tempCanvas, "repeat");

完整代码

编辑创建了一个更通用的可重用示例

 function drawPattern(img, size) {
     var canvas = document.getElementById('canvas');

     canvas.height = 500;
     canvas.width = 500;

     var tempCanvas = document.createElement("canvas"),
         tCtx = tempCanvas.getContext("2d");

     tempCanvas.width = size;
     tempCanvas.height = size;
     tCtx.drawImage(img, 0, 0, img.width, img.height, 0, 0, size, size);

     // use getContext to use the canvas for drawing
     var ctx = canvas.getContext('2d');
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     ctx.fillStyle = ctx.createPattern(tempCanvas, 'repeat');

     ctx.beginPath();
     ctx.rect(0,0,canvas.width,canvas.height);
     ctx.fill();

}

var img = new Image();
img.src = "http://static6.depositphotos.com/1070439/567/v/450/dep_5679549-Moon-Surface-seamless.jpg";
img.onload = function(){
    drawPattern(this, 100);
}