1. 首頁
  2. 問答
  3. HTML5畫布：透視文字

HTML5畫布：透視文字

2013-09-30 377 views
0

我正在嘗試將我的第一個遊戲創建爲HTML5。我搜索了幾個小時，比如留下文字persperctiva（對於畫布）。HTML5畫布：透視文字

查看附件我需要的。文本中的兩個「要點」需要根據需要進行修改。附：圖片：https://pbs.twimg.com/media/BVbuU1PCUAA7d8a.png

PS：我設法離開只有文本「旋轉」（基本），這是不正確的，我的目的。

我發現的所有話題都是不可能的。

來源

2013-09-30 Luís De Marchi

+1

「我發現在迴應說，所有的主題是不可能的。」 **任何**都有可能:) – Cristy

+1

@Cristy阿迪達斯是你嗎？ – federicot

+0

我想說：這是不可能的與一個Context2d體面的表現。只有文本是動畫時才重要。如果它是動畫webGL是一個解決方案，但與有限的瀏覽器支持（http://caniuse.com/webgl） – GameAlchemist

回答

1

Canvas的2d上下文無法執行鏈接中顯示的非並行轉換。

要做類似透視的變形，您需要使用canvas 3D上下文（webGL）。

另外，這裏是如何從原三角形插值像素爲一個扭曲的三角形後：

http://codeslashslashcomment.com/2012/12/12/dynamic-image-distortion-html5-canvas/

這將允許在2D環境下，你爲「手動」做透視畸變。

來源

2013-09-30 19:38:17 markE

+0

該示例集僅適用於圖像？需要用文字來做...缺乏這一點，我認爲將所有數字創建爲已經「格式化」而不是3D的圖像的成本會更低。你有什麼意見？ –

+1

在畫布形狀中，文本和圖像都是一樣的......畫布上的像素。如果您想透視 - 僅扭曲文本而不是圖像，則可以使用第二個屏幕外畫布來扭曲文本像素，然後將這些透視文本像素繪製到主畫布上。以下是如何合併輔助畫布：mainContext.drawImage（secondaryCanvas，x，y）;你提到一個「已經格式化的數字作爲圖像」。如果這意味着在像Photoshop這樣的圖像編輯器中扭曲數字並在畫布上繪製這些圖像，那麼我的意見是做到這一點 - 更容易，也許更好的質量！ – markE

0

它看起來並不像有參與多角度，所以你可能會用一個簡單的傾斜脫身：

var angle = -0.2; 
context.setTransform(1, 0, angle, 1, 0, 0); 
context.drawImage(img, 100, 0, 350, 100);

http://jsfiddle.net/fTQcn/

來源

2013-09-30 19:43:17 Strille

+0

此示例僅適用於圖像。做旋轉仍然有點不同於尋找（我需要把文本的想法放在木桌上）。使用EaselJS：new createjs.Text（「Hello」，「36px Arial」，「＃777」）; text.rotation = 3; –

相關問題

 相關問題