请问您能帮帮我吗？我正在寻找一种方法，如何使用图像文件（.png 或 .jpg）在画布中映射多边形，但我很困惑，我不知道该怎么做......你能告诉我或给教程的链接如何在画布中用图像映射多边形？非常感谢
【问题讨论】：
标签： javascript canvas mapping polygon
好的，我想我现在明白你的问题了。
您想将文本绘制成曲线路径...
好消息/坏消息：
Canvas不能直接这样做。
但是您可以使用 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>
【讨论】：