2012-12-19 1 views
12

캔버스 createPattern 내부에 사용하기 위해 자바 스크립트와 이미지 \t의 크기를 조정하지만 자바 스크립트 내부 이미지 변수를 갖고 싶어 , 크기를 조정 한 다음 context.createPattern (이미지, "반복") 내에서 이미지를 사용하십시오. 나는 그것을하는 방법에 대한 어떤 힌트도 발견하지 못했다. .난 당신이 당신이 IMG 태그 내부 사용하려는 이미지의 크기를 조정하는 방법에 대한 몇 가지 트릭을 본 적이

기능 데모는 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);             
    } 
} 
+0

? 그 외에 또 무슨 짓을 한거야? – JSuar

+0

이미지 크기가 조정되지 않습니다. 데모를 참조하십시오. 실제 오류는 없습니다. 나는 여기 저기에있는 몇 가지 다른 것들을 시도했지만 아무도 일 해왔다. 나는 내가 시도한 것에 대한 목록을 가지고 있지 않다. – user1916806

답변

15

은 당신이 할 수있는 패턴보다는 이미지 자체로이 일시적으로 캔버스를 사용하여 다음 임시 캔버스를 확인하고 필요한 크기로에 이미지를 복사합니다.

Live Demo

먼저 사용 지금 캔버스 당신을 스케일 크기는 당신이

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

필요하고,

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

      tempCanvas.width = side*2; 
      tempCanvas.height = 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); 
} 
받고있는 어떤 오류
+1

Spot on. 고맙습니다. – user1916806

+0

환상적인 접근법. 패턴을 만들기 전에 이미지의 크기를 조정하려고했습니다. 시간적 캔버스를 만드는 것이 트릭을 만들었습니다. 캔버스에 100 % 캔버스를 채울 수있는 이미지로 캔버스를 채울 수있는 유일한 방법이기 때문에이 대답을 올바른 것으로 표시해주세요. – viarnes

관련 문제