調整圖像\t使用Javascript畫布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

你可以做的是做一個臨時的畫布，將圖像複製到你需要的尺寸，然後使用該臨時帆布爲模式，而不是圖像本身。

Live Demo

首先創建畫布

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