Taste of Tech Topics

Acroquest Technology株式会社のエンジニアが書く技術ブログ

Canvas VS SVG どちらが使いやすいのか？

HTML5/CSS

こんにちは、しょこたんです。
今日はCanvasについて使い勝手を比較してみます！

CanvasというのはHTML5の機能で、
簡単かつ自由に描画することが可能。

しかし本当に便利なのか？
というのは疑問ですよね。

そこで、
同じようにHTML上で描画をすることができる、
SVG形式との比較からCanvasの使い勝手がいいのか悪いのか
解剖してみます(^^)

1章 SVG形式って？

ここで寄り道して
SVG形式を紹介します。

SVGとは、xml形式で記述することで、
描画を提供するものです。

特徴は拡大縮小した時に、解像度が落ちないこと。
ちなみに、画像やテキストも扱うことができます。

一方Canvasは、ピクセル単位で詳細な描画ができる反面、
拡大縮小時に解像度は変化してしまいます。

どちらもW3C標準で規定されている形式です。
この二つを比較していきます。

2章 図形を書くための下準備。


実際に書く前に下準備。

SVG形式でも、Canvasでの描画でも、
直接自分で書き込むのは、
はっきり言って手間がかかりすぎます。

どちらもライブラリを使って書きましょう。

ここでは、
・SVG形式 → Rphael.js
・Canvas → JcanvaScript.js
を使ってみます。

それぞれ、

<script type="text/javascript"
	src="<%=request.getContextPath()%>/lib/raphael/raphael-min.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/lib/jcanvaScript/jCanvaScript.1.3.1.js"></script>

と宣言すれば使えるようになります。

3章 三角形描画に挑戦

四角形や円の描画はcanvasに標準で
サポートされているので、
サポートされていない三角形を書いてみます。

■JcanvaScript.js

//描画スタート
var idCanvas = "canvasArea";
jc.start(idCanvas);
var triangle = jc.line([[60,20],[75,132],[220,60]],1);
//redraw
jc.start(idCanvas);

線を描いた後に、2つ目の引数に1をいれれば、
多角形となります。

■Raphael.js

//描画start
var raphael = Raphael(10,10,1000,1000);
var object = raphael.path("M160,150 260,250 60,250 z");
object.attr('fill','red');

こちらは、線を描くときに、最後に"z"を入れることで、
多角形を描画できるようです。

上の図がCanvas、下の図がRaphaelです。

気をつけるべきは、
Canvas描画には、再描画が必要なこと。
ちょいと面倒ですね。

4章 何がかけるの？

それぞれどの形式がサポートされているのか
比較してみます。

■JcanvaScript.js

線、図形の描画
画像などのimage
テキスト形式

■Raphael.js

線、図形の描画
画像などのimage
テキスト形式

どちらも一通りサポートされているようですね。

Canvasのほうがグラデーション機能がある分
使い勝手がよさそうです。
描画の種類もCanvasのほうが有利かな。

5章 dragしてみよう

描いた多角形を動かしてみたい
と思いますよね！

そこで、オーソドックスに
マウスによるドラッグを実現してみます。

■JcanvaScript.js

var idCanvas = "canvasArea";
jc.start(idCanvas,10);
jc.line([[60,20],[75,132],[220,60]],1).draggable();

気をつけるべきは、
リアルタイム描画を行うために、start関数にintの数値をいれることです。
※繰り返し描画のサイクル時間を指定しています。

まさかこんなに簡単にできるとは思ってませんでした。

　　　　　　　　　　　　　　　　　　　　　　　　　↓

ちゃんとマウスのドラッグについてきます。

■Raphael.js

var raphael = Raphael(300,300,1000,1000);
var <span class="kwrd">object = raphael.path("M160,150 260,250 60,250 z");
object.drag(
    function(dx,dy){
        var moveX = dx - this.mx;
        var moveY = dy - this.my;
        this.translate(moveX,moveY);
        this.mx = dx;
        this.my = dy;
    },
        function(x,y){
        this.ox = x;
        this.oy = y;
        this.mx = 0;
        this.my = 0;
    },
        function(x,y){
            
    }
);
object.attr('fill','red');

drag関数はあるものの、
移動は自分での実装が必要です(^^;


　　　　　　　　↓

実際に動かしてみると、
SVGのほうが動きが滑らかできれいですね。
物を実際に動かすSVG形式だからだと思います。

一方再描画しないといけないCanvasは、
動かした時に少しカクカク動きます。

Raphaelのほうが動的処理に強いですね。

6章 どうなの？

用途によって使い分けたほうがよさそうです。

きれいな画像を表示したいという用途なら、
今のところJcanvaScriptのほうが、
機能が充実していて、使いやすい。

また、あらかじめ決められたアニメーションを
表示するのも、グラデーションのアニメーションサポートも
あり、使いやすいでしょう。

一方マウスで動的に動かすなど、
描画ソフトのような動きをさせるには、
Raphael.jsのほうが動きがよいですね。
※特にCanvas側でカクカク動くのは、
※ちょっといただけないかな。

固定描画なら、Canvas
動的描画なら、SVG
がいいのではないでしょうか。

どちらも、ライブラリ機能の成長が楽しみですね。
使ってみてください。

以上