如何在JavaScript中映射多邊形

請幫助我嗎？我正在尋找一種方式，如何用圖像文件（.png或.jpg）在畫布上映射多邊形，但我很困惑，我不知道該怎麼做......你能告訴我還是給一個教程的鏈接如何用圖像在畫布上映射多邊形？非常感謝你如何在JavaScript中映射多邊形

2013-02-18 Jan Kožušník

你是什麼意思[ 「地圖」]的意思（http://en.wikipedia.org/wiki/Map_（數學））？或者你的意思是剪輯？ – Bergi 2013-02-18 17:03:43

如果你的意思是texure映射：http://stackoverflow.com/questions/4774172/image-manipulation-and-texture-mapping-using-html5-canvas – 2013-02-18 18:46:21

是啊，我讀了這個線程...但我不知道如何使用這個 – 2013-02-18 19:31:53

好吧，我想我現在理解你的問題。

要繪製文本的曲線路徑...

好消息/壞消息：

帆布不能直接做到這一點。

但是，你可以使用Html SVG來做到這一點。

您可以使用像Inkscape這樣的免費程序來設計您的徽標。

然後將其保存爲SVG格式（myLogo.svg）。

然後你就可以將其加載到畫布上是這樣的：

var canvas=document.getElementById("canvas"); 
var ctx=canvas.getContext("2d"); 
var img=new Image(); 
img.onload=function(){ 
    ctx.drawImage(img,0,0); 
} 
img.src="http://mySite.com/myLogo.svg";

這裏是那種SVG，你可以創建，以滿足您的需求的快速演示。

這裏是一個小提琴：http://jsfiddle.net/m1erickson/v4EX3/

<!doctype html> 
<html> 
<head> 
    <style> 
     body{ background-color: ivory; } 
     div{float:left;} 
    </style> 
</head> 

<body> 
<div> 
<svg viewBox = "0 0 200 120"> 
    <defs> 
     <path id = "curvedPath" d = "M 10,90 Q 100,15 200,70 Q 340,140 400,30"/> 
    </defs> 
    <g fill = "white"> 
     <use x = "0" y = "0" xlink:href = "#curvedPath" stroke = "black" stroke-width="40" fill = "none"/> 
     <text font-size = "20"> 
      <textPath xlink:href = "#curvedPath"> 
       Use SVG to put your text on a curved path like this! 
      </textPath> 
     </text> 
    </g> 
</svg> 
</div> 
</body> 
</html>

來源

2013-02-19 21:13:42 markE

哦，而且沒有任何方法如何解決這個問題：http://stackoverflow.com/questions/4774172/image-manipulation-and- texture-mapping-using-html5-canvas？我將從圖片中製作三角形，我會逐漸繪製它們，然後我會將它們變成我想要的或者類似的東西？因爲圖片將會是900左右，所以可能會相當困難... – 2013-02-19 22:11:04

笑！我以爲我瞭解你，但現在我迷失了方向。好的，請訪問http://raphaeljs.com/並瞭解如何使用這個優秀的SVG庫創建SVG對象。特別要看Raphael.getPointAtLength（路徑，長度）。使用此方法，您可以定義路徑並沿該路徑將對象放置在指定的長度上。您可以沿路徑繪製三角形，旋轉它們等等！拉斐爾是一個很棒的圖書館，但是根據你的想法，你的學習曲線會變得很陡峭。祝你好運！ – markE 2013-02-20 00:46:33

謝謝，我會嘗試;） – 2013-02-20 09:02:44

如何在JavaScript中映射多邊形

回答

相關問題