Illustratorで書きだしたSVGの要素をCanvasでの記述に置き換えてみよう

カテゴリーから探す

年別から見る

2016/01/20

Illustratorで書きだしたSVGの要素をCanvasでの記述に置き換えてみよう

Illustratorで書きだしたデータを、Canvasで利用する方法として、
SVG形式で書きだした上で、Canvasでの記述方法に変更して利用するという方法という方法が、１つ考えられます。
さらにCanvasでの記述方法に変更する方法には、JSのプラグインを利用する方法も公開されています。
ただ、より自由に扱うためには、
SVGとCanvasでの記述方法の関係性について理解する必要があると思いましたので、
実際にやってみました。

↓作ってみたもの
DEMO

方法

円の場合


<circle fill="#92CCEF" cx="182.494" cy="70.706" r="33.601"/>

1	<circle fill="#92CCEF" cx="182.494" cy="70.706" r="33.601"/>


$ctx.beginPath(); //図形の始まり
$ctx.arc(182.494, 70.706, 33.601, 0, Math.PI * 2);
$ctx.fillStyle = "#92CCEF"
$ctx.fill();
$ctx.closePath(); //図形の終わり

$ctx.beginPath(); //図形の始まり

$ctx.arc(182.494, 70.706, 33.601, 0, Math.PI * 2);

$ctx.fillStyle = "#92CCEF"

$ctx.fill();

$ctx.closePath(); //図形の終わり

直線の場合


<line fill="none" stroke="#F9D690" stroke-width="3" x1="148.892" y1="198.682" x2="148.892" y2="164.411"/>

1	<line fill="none" stroke="#F9D690" stroke-width="3" x1="148.892" y1="198.682" x2="148.892" y2="164.411"/>


$ctx.beginPath(); //図形の始まり
$ctx.moveTo(148.892, 198.682);
$ctx.lineTo(148.892, 164.411);
$ctx.lineWidth = 3;
$ctx.strokeStyle = "#F9D690";
$ctx.stroke();
$ctx.closePath(); //図形の終わり

$ctx.beginPath(); //図形の始まり

$ctx.moveTo(148.892, 198.682);

$ctx.lineTo(148.892, 164.411);

$ctx.lineWidth = 3;

$ctx.strokeStyle = "#F9D690";

$ctx.stroke();

$ctx.closePath(); //図形の終わり

多角形の場合


<polygon fill="#F9D690" points="207.562,54.056 225.541,47.595 214.305,68.663 "/>

1	<polygon fill="#F9D690" points="207.562,54.056 225.541,47.595 214.305,68.663 "/>


$ctx.beginPath(); //図形の始まり
$ctx.moveTo(207.562, 54.056);
$ctx.lineTo(225.541, 47.595);
$ctx.lineTo(214.305, 68.663);
$ctx.fillStyle = "#F9D690"
$ctx.fill();
$ctx.closePath(); //図形の終わり

$ctx.beginPath(); //図形の始まり

$ctx.moveTo(207.562, 54.056);

$ctx.lineTo(225.541, 47.595);

$ctx.lineTo(214.305, 68.663);

$ctx.fillStyle = "#F9D690"

$ctx.fill();

$ctx.closePath(); //図形の終わり

ベジェ曲線の場合


<path fill="#92B9E2" d="M190.309,91.615c3.472,10.215,8.335,61.291-29.171,72.042c-37.511,10.753-65.987-7.797-77.101-20.431
	c-11.113-12.632,78.026-32.794,83.583-47.042C173.176,81.938,190.309,91.615,190.309,91.615z"/>

1 2	<path fill="#92B9E2" d="M190.309,91.615c3.472,10.215,8.335,61.291-29.171,72.042c-37.511,10.753-65.987-7.797-77.101-20.431 c-11.113-12.632,78.026-32.794,83.583-47.042C173.176,81.938,190.309,91.615,190.309,91.615z"/>


$ctx.beginPath(); //図形の始まり
$ctx.moveTo(190.309, 91.615);
$ctx.bezierCurveTo(3.472 + 190.309, 10.215 + 91.615,
    8.335 + 190.309, 61.291 + 91.615,
    -29.171 + 190.309, 72.042 + 91.615);
$ctx.bezierCurveTo(-37.511 + -29.171 + 190.309, 10.753 + 72.042 + 91.615,
    -65.987 + -29.171 + 190.309, -7.797 + 72.042 + 91.615,
    -77.101 + -29.171 + 190.309, -20.431 + 72.042 + 91.615);
$ctx.bezierCurveTo(-11.113 + -77.101 + -29.171 + 190.309, -12.632 + -20.431 + 72.042 + 91.615,
    78.026 + -77.101 + -29.171 + 190.309, -32.794 + -20.431 + 72.042 + 91.615,
    83.583 + -77.101 + -29.171 + 190.309, -47.042 + -20.431 + 72.042 + 91.615);
$ctx.bezierCurveTo(173.176, 81.938,
    190.309, 91.615,
    190.309, 91.615);
$ctx.fillStyle = "#92B9E2"
$ctx.fill();
$ctx.closePath(); //図形の終わり

$ctx.beginPath(); //図形の始まり

$ctx.moveTo(190.309, 91.615);

$ctx.bezierCurveTo(3.472 + 190.309, 10.215 + 91.615,

8.335 + 190.309, 61.291 + 91.615,

-29.171 + 190.309, 72.042 + 91.615);

$ctx.bezierCurveTo(-37.511 + -29.171 + 190.309, 10.753 + 72.042 + 91.615,

-65.987 + -29.171 + 190.309, -7.797 + 72.042 + 91.615,

-77.101 + -29.171 + 190.309, -20.431 + 72.042 + 91.615);

$ctx.bezierCurveTo(-11.113 + -77.101 + -29.171 + 190.309, -12.632 + -20.431 + 72.042 + 91.615,

78.026 + -77.101 + -29.171 + 190.309, -32.794 + -20.431 + 72.042 + 91.615,

83.583 + -77.101 + -29.171 + 190.309, -47.042 + -20.431 + 72.042 + 91.615);

$ctx.bezierCurveTo(173.176, 81.938,

190.309, 91.615,

190.309, 91.615);

$ctx.fillStyle = "#92B9E2"

$ctx.fill();

$ctx.closePath(); //図形の終わり

上記のIllustratorでSVGを書き出した場合、ベジェ曲線のコードは上記のように書き出されると思いますが、
このままでは見づらいので、下記のように、改行したり、スペースを入れたりすると書き換えがしやすくなります。


<path fill="#92B9E2" d="M 190.309, 91.615
c 3.472, 10.215, 8.335, 61.291 -29.171, 72.042
c -37.511, 10.753 -65.987 -7.797 -77.101 -20.431
c -11.113 -12.632, 78.026 -32.794, 83.583 -47.042
C 173.176, 81.938, 190.309, 91.615, 190.309, 91.615
z"/>

<path fill="#92B9E2" d="M 190.309, 91.615

c 3.472, 10.215, 8.335, 61.291 -29.171, 72.042

c -37.511, 10.753 -65.987 -7.797 -77.101 -20.431

c -11.113 -12.632, 78.026 -32.794, 83.583 -47.042

C 173.176, 81.938, 190.309, 91.615, 190.309, 91.615

z"/>

Illustratorでは、マイナスの値がある場合に、コンマとスペースが省略されるため、気をつけて下さい。
SVGのMが、CanvasのmovoToに、
SVGのCおよびcが、CanvasのbezierCurveToに相当します。
小文字の場合、相対パスとなり、Canvasではそのまま利用できないので、それ以前の座標をプラスする必要があります。