html5 캔버스 번역

html5 캔버스에서 이미 그린 전체 장면 (예 : 5 픽셀)을 어떻게 변환 할 수 있는지 알고 싶습니다. translate 메서드는 캔버스의 좌표계를 변환한다는 것을 알고 있지만 이미 캔버스에 그려져있는 전체 장면을 번역 할 방법이 있는지 알고 싶습니다.html5 캔버스 번역

출처

2010-08-02 George

당신은 변환을 적용하고의 drawImage는 캔버스 자체를 전달 호출 할 수 있습니다.

ctx.save(); 
ctx.translate(0, 5); 
ctx.drawImage(canvas, 0, 0); 
ctx.restore();

이렇게하면 원래 내용은 계속 남아 있습니다. 달성하려는 효과에 따라 globalCompositeOperation을 설정하면 도움이 될 수 있습니다.

그러나 먼저 drawImage를 사용하여 두 번째 캔버스로 먼저 복사하고 현재를 지우고 변형을 적용하고 사본에서 그릴 필요가 있습니다.

출처

2010-08-02 21:08:13

이것은 내가 원한 것처럼 들립니다. 나는 그것을 시험해보고 그것이 나를 위해 효과가 있었는지 알려주지. – George

이 솔루션은 저에게 큰 도움이되었습니다. 그러나 스케일링이 관련되어있을 때는 잘 작동하지 않습니다. 드로잉 영역의 너비와 높이가 120000과 60000이되도록 배율을 조정하는 캔버스가 있습니다. 캔버스 요소 자체의 너비는 1200과 600이므로 배율 변환은 드로잉 전에 좌표계에서 수행됩니다. 어쨌든 문제는 변환 및 크기 조정이 두 번째 캔버스로 복사하고 현재를 지우고 변환 및 복사를 적용하면 이미지가 흐려진다는 것입니다. 그냥 흐리게하지 않는 방법을 알고 있는지 알고 싶었습니다. – George

그래, 그게 정확히 무슨 일이야. 문제는 백업 캔버스에 고해상도가있는 기본 캔버스에서 그림을 그릴 경우 늘린 1200000x600000 해상도가 아닌 기본 1200x600 해상도로 그려집니다. 또한, 앞뒤로가는 솔루션은 제 목적으로는 OK입니다. 사용자가 원하는 때에 만 수행하면되므로 계속해서 그렇게하지 않을 것입니다. – George

-1

캡쳐 화면을 캡처하고 번역하지 않는 이상은 안됩니다. 바로 트릭을 할해야 드로잉 코드 전에

context.translate(0, 5)// or your values

를 삽입하지만

참조 : MDN Canvas Tutorial (Transformations)

출처

2010-08-02 21:01:33 pop850

나는 이미 그것을 다루었으며 (적어도 나는 생각했다.) 그것이 내가 원하는 바가 아니라는 것을 분명히했다. 그 번역은 이미 그려진 것이 아니라 나중에 그릴 것을 번역 할 것입니다. 그러나 스크린 샷 솔루션이 내가 원하는 것일 수 있습니다. 그것을하는 방법에 대한 지침이 있습니까? – George

Canvas 객체에는 toDataUrl이라는 메서드가 있습니다. 이 질문보기 http://stackoverflow.com/questions/934012/get-image-data-in-javascript –

html5 캔버스 번역

답변

관련 문제