Html5 캔버스의 패턴 크기 변경

Question

내 문제 : ImageObject가 있는데, 이는 PatternObject를 만드는 데 사용됩니다. 내 문제는 패턴을 만들기 전에 이미지의 width 및 height 속성을 변경했지만 실제로 이미지를 다시 매핑하지 않으며 문제가되지 않는다는 것입니다. 문제는, 제가 지금 패턴을 가지고 있다는 것입니다, 그것은 이미지 자체와 다른 크기 (원래 이미지 크기)입니다. 그 패턴의 fillStyle을 사용하여 선을 그려야한다면, (새로운 크기의 패턴이 필요하기 때문에) 적합하지 않습니다.

내 질문 : 쉬운 방법이있어 패턴의 너비와 높이를 조절할 수 있습니까?

내는을 시도하고 내가 그들처럼 해달라고 이유 :

1) 새로운 크기의 캔버스에 원본 이미지를 렌더링하고의 패턴을 만들 수 있습니다. 캔버스가 만들어지고 너무 느리게 렌더링되어 패턴을 직접로드 할 수 없기 때문에이 패턴을 사용하지 않았습니다. 그러나 나는 그 패턴을 직접적으로 원합니다.

2) 새로운 이미지 크기와 원본 사이의 차이를 계산하고, 컨텍스트의 lineWidth를 변경하여 패턴 높이가 정확하게 맞추고 선의 크기가 줄어들 기 때문에 크기가 적당합니다. . 실시간으로 렌더링하기 때문에 이것을 사용하지 않았습니다. 웹 앱에서 나중에 사용하기에는 너무 느립니다.

고맙습니다. :)

Answer 1

캔버스 사용 (1 단계)이 가장 유연한 방법입니다.

이미지를 직접 사용하는 것보다 캔버스를 사용하여 다른 캔버스를 그리는 속도가 느리지는 않습니다. 그들은 둘 다 같은 요소 기반을 사용합니다 (이미지와 마찬가지로 비트 맵을 블리딩합니다).

(업데이트 :. 최근의 브라우저에서 패턴에 대한 로컬 변환 행렬의 추가 단계를 통과 않는 스타일로 패턴을 사용하여 그리기)

는 패턴과 간단한의 크기에 새로운 캔버스 만들기 그것으로 이미지를 그릴 : 가능하면

patternCtx.drawImage(img, 0, 0, patternWidth, patternHeight); 

그런 다음 패턴 (내부적으로 패턴이 이미지를이 그려 처음으로 캐시의 기본으로 patternCtx의 캔버스를 사용, 거기에서, 그냥 그것을 가지고 무엇을 두 배로 전체 캔버스가 채워질 때까지).

다른 옵션은 필요로하는 모든 크기로 이미지를 미리 크기 조정하고 모두로드 한 다음 필요한 크기의 이미지를 선택하는 것입니다.

세 번째는 이미지를 패턴으로 그리는 것입니다. 그러나 위의 메서드 (내부)를 사용하면 사용할 수있는 결과를 얻을 수 있지만 내장 메서드와 비교할 때 효율성이 떨어집니다. 수동 패터닝

예 :

var ctx = canvas.getContext('2d'); 
 
var img = new Image(); 
 
img.onload = function() { 
 
    fillPattern(this, 64, 64); 
 
    change.onchange = change.oninput = function() { 
 
    fillPattern(img, this.value, this.value); 
 
    } 
 
}; 
 
img.src = "//i.stack.imgur.com/tkBVh.png"; 
 

 
// Fills canvas with image as pattern at size w,h 
 
function fillPattern(img, w, h) { 
 

 
    //draw once 
 
    ctx.drawImage(img, 0, 0, w, h); 
 

 
    while (w < canvas.width) { 
 
     ctx.drawImage(canvas, w, 0); 
 
     w <<= 1; // shift left 1 = *2 but slightly faster 
 
    } 
 
    while (h < canvas.height) { 
 
     ctx.drawImage(canvas, 0, h); 
 
     h <<= 1; 
 
    } 
 
}

<input id=change type=range min=8 max=120 value=64><br> 
 
<canvas id=canvas width=500 height=400></canvas>

(또는 video as pattern 함께).