HTML5에 대한 첫 번째 게임을 만들려고합니다. 그리고 나는 텍스트 persperctiva (캔버스)를 떠나는 것처럼 시간을 검색합니다.HTML5 캔버스 : 원근감있는 텍스트
내가 원하는 것을 참조하십시오. 텍스트에있는 두 개의 "포인트"가 필요한 효과로 수정되어야합니다. 이미지 : https://pbs.twimg.com/media/BVbuU1PCUAA7d8a.png
추신 : 나는 단지 "회전"(기본) 텍스트 만 남겨 두었습니다. 그것은 내 목적에 적합하지 않습니다.
내가 발견 한 모든 주제는 응답 할 수 없습니다.
캔버스의 2 차원 컨텍스트는 링크에 표시된 비 병렬 변환을 수행 할 수 없습니다.
원근감처럼 뒤틀리는 작업을 수행하려면 캔버스 3D 컨텍스트 (webGL)를 사용해야합니다.
또한, 여기 왜곡 된 삼각형으로 원래 삼각형의 픽셀을 보간하는 방법에 대한 게시물입니다 : 이것은 당신이 "수동"2D 환경에서 관점의 왜곡을 할 수
http://codeslashslashcomment.com/2012/12/12/dynamic-image-distortion-html5-canvas/
.
이 예제 세트는 이미지에서만 작동합니까? 텍스트로이 작업을 수행해야하는 것은 아닙니다. 단지 3D 대신 이미 "형식화 된"이미지로 모든 숫자를 만드는 것이 비용이 적게 듭니다. 당신의 의견 것입니다? –
캔버스 도형에서 텍스트와 이미지는 모두 캔버스의 픽셀과 같습니다. 텍스트가 아닌 텍스트 만 투시 왜곡하려면 두 번째 오프 스크린 캔버스를 사용하여 텍스트 픽셀을 왜곡 한 다음 원근감있는 텍스트 픽셀을 기본 캔버스에 그립니다. 보조 캔버스를 병합하는 방법은 다음과 같습니다. mainContext.drawImage (secondaryCanvas, x, y); 당신은 "이미지로 이미 포맷 된 숫자"를 언급. 포토샵과 같은 이미지 편집기에서 숫자를 왜곡하고 그 이미지를 캔버스에 그리는 것을 의미한다면 제 생각으로는 훨씬 쉽고 어쩌면 더 좋은 품질입니다! – markE
관련된 많은 관점이처럼 그것은 보이지 않는, 그래서 당신은 간단한 스큐 멀리 얻을 수 있습니다 ". 내가 응답 말하고있는 모든 주제는 불가능하다"
var angle = -0.2;
context.setTransform(1, 0, angle, 1, 0, 0);
context.drawImage(img, 100, 0, 350, 100);
이 예제는 또한 이미지에만 해당됩니다. 회전을 만드는 것은 여전히 추구 (나무 테이블에 텍스트의 아이디어를 얻을 필요가)보다 조금 다릅니다. EaselJS 사용 : 새로운 createjs.Text ("Hello", "36px Arial", "# 777"); text.rotation = 3; –
가 ** 아무거나 ** 가능합니다 :) – Cristy
@Cristy Adidas 당신 맞습니까? – federicot
나는 차라리 말하고 싶다 : 괜찮은 성능을 가진 Context2d에서는 불가능하다. 텍스트가 움직이는 경우에만 중요합니다. 애니메이션 경우 WebGL 솔루션,하지만 제한된 브라우저 지원 (http://caniuse.com/webgl) – GameAlchemist