0

助けてくれますか？イメージ ファイル (.png または .jpg) を使用してキャンバスにポリゴンをマップする方法を探していますが、かなり混乱しており、その方法がわかりません...教えてもらえますかキャンバス内のポリゴンを画像でマップする方法のチュートリアルへのリンク? どうもありがとうございました

4

1 に答える 1

0

わかりました、私は今あなたの質問を理解していると思います.

テキストを曲線状に描きたい...

良いニュース/悪いニュース:

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>
于 2013-02-19T21:13:42.887 に答える