HTML5 canvas：文本透視圖

Question

我正在嘗試用HTML5創建我的第一個游戲。 而且我要搜索幾個小時，例如留下文本persperctiva（用於畫布）。

見附件我需要的。 是文本中的兩個“要點”，需要修改為我需要的效果。 圖片： https : //pbs.twimg.com/media/BVbuU1PCUAA7d8a.png

PS：我設法只留下“輪換”（基本）一詞，這對我來說不合適。

我找到的所有主題都無法回應。

Answer 1

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

要進行類似透視的變形，您將需要使用canvas 3d上下文（webGL）。

另外，這是有關如何將像素從原始三角形插值到變形三角形的文章：

這將允許您“手動”在2d上下文中進行透視變形。

Answer 2

看起來並沒有涉及太多的角度，所以您可能會遇到一個簡單的偏斜：

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