एक कैनवास createPattern

Question

मैं कैसे आप एक छवि है कि आप एक आईएमजी-टैग के अंदर उपयोग करना चाहते हैं का आकार बदलने पर कुछ चाल देखा है अंदर उपयोग के लिए जावास्क्रिप्ट के साथ एक छवि का आकार बदलें \t लेकिन मैं एक जावास्क्रिप्ट अंदर एक छवि चर करना चाहते हैं , इसका आकार बदलें और फिर संदर्भ.क्रेट पैटर्न (छवि, "दोहराएं") के अंदर छवि का उपयोग करें। मुझे ऐसा करने के तरीके पर कोई संकेत नहीं मिला ।

आप http://karllarsson.batcave.net/moon.html पर एक कार्यात्मक डेमो ढूंढ सकते हैं जो मैं करना चाहता हूं।

लोकतर का समाधान अच्छा दिखता है। मेरे पास अभी तक सही पहलू को ठीक करने का समय नहीं है लेकिन अब मुझे पता है कि यह कैसे करें। एक बार फिर आपका धन्यवाद। यहां एक काम कर रहे डेमो 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); 

की आवश्यकता होती है और अब का उपयोग सिर्फ पैटर्न

के रूप में बनाया गया 0

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