캔버스에 문제가 있습니다 createPattern. 나는 두 개의 상자를 가지고, 모두가 keyarrow을 누른 후 이동합니다 :JavaScript 캔버스 createPattern
예 : http://jsfiddle.net/wA73R/1/
문제는 createPattern로 채워진 상자 배경도 이동하고 있다는 점이다. 어떻게 피하는거야? 어떤 해결책이 있습니까? 큰 상자는 하나의 예일뿐입니다 (drawImage은 좋은 해결책이 아니므로 배경 이미지를 반복 할 수있는 무언가가 필요합니다).
주셔서 감사합니다.
사실 문제는 배경이 것을하지 이동 - 당신이 다른 위치에 사각형을 그리는 동안은 정적이다.
어떻게 피할 수 있습니까?
패턴은 항상 현재 위치가 현재 변환에 의해 정의 된 좌표 원점에서 그려집니다. 앞으로는 setTransform method을 사용하여 패턴 자체를 변형 할 수 있지만 현재 구현되지 않았기 때문에 대신 global transformation matrix을 변경해야합니다.
ctx.fillStyle=pattern;
ctx.save();
ctx.translate(boxes[i].x - left , boxes[i].y);
ctx.fillRect(0, 0, boxes[i].width, boxes[i].height);
ctx.restore();
(updated demo) : 귀하의 경우
은 그 대신 x/y에서 당신의 사각형 그리기, 당신은 x/y에 전체 문맥을 번역하고 0/0에 당신의 사각형을 그립니다 의미
Worksforme. 배경은 정적이며, 그것을 보여주는 상자가 움직입니다. – Bergi
@Bergi 나는 내가 정말로 원하는 것을 설명하는 방법을 모르겠다. :) 상자가 위치를 바꾸고 있지만 상자가 움직일 때 배경이 항상 같지 않다. 그래서 그것은 배경을 스크롤하는 것처럼 보입니다. 나는 drawImage와 같은 것을 원한다. (하지만 불규칙한 모양을 원할 경우 사용할 수 없다.) – Amay
그러면 채우기 패턴을 상대적으로 그려진 모양에 배치하려고합니까? – Bergi