如何在JavaScript中映射多边形

How to map polygon in JavaScript

本文关键字：映射 多边形 JavaScript      更新时间：2023-09-26

你能帮我吗？我正在寻找一种方法，如何用图像文件（.png或.jpg）在画布中映射多边形，但我很困惑，我不知道如何做到…你能告诉我或提供一个如何用图像在画布中绘制多边形的教程链接吗？非常感谢

好的，我想我现在明白你的问题了。

您想将文本绘制为曲线路径。。。

好消息/坏消息：

画布不能直接执行此操作。

但是，可以使用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的快速演示。

下面是一个Fiddle：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>
相关文章：