jCanvasの使い方

公開: 2014-10-14 06:12
更新: 2016-04-29 06:02

HTML5からCanvasが追加され、
複雑な図とかをブラウザ上で生成できるようになりました。



そんなCanvasをより簡単に操作できる「jCanvas
今回はこのプラグインを簡単な例を通して紹介したいと思うことにしました。




jCanvasのダウンロード

まずは公式サイトへ移動しファイルをダウンロードしましょう。
⇒ http://calebevans.me/projects/jcanvas/

jCanvasの導入



jCanvasの導入

jQueryとjCanvasをこんな感じで読み込みます。

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jcanvas.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

main.jsの方にガリガリとコードを書いて行くことにします。




1.キャンバスの用意

こんな感じでHTMLを用意

<div id="canvas">
        <canvas></canvas>
</div>

高さは今回は200pxにしてみまふ。

#canvas { height: 200px; }

で、こんな感じ(分かりやすいようにborder付けてます。)




2.Retina対応するべく、キャンバスを二倍にする。

そのままのサイズで描いてしまうとiPhoneやRetina対応のPCでボケてしまうので2倍にします。

$(function(){

        //グラフを描画するよ!
        var graph = function() {
                var $wrapper = $('#canvas');
                var $canvas = $('#canvas canvas');
                
                //Retina対応
                var scale = 2.0; //Retinaで2倍
                var w = $wrapper.width() * scale;
                var h = $wrapper.height() * scale;
                $canvas.attr({'width': w, 'height': h});
                $canvas.width(w/scale); $canvas.height(h/scale);

                $canvas.clearCanvas(); //キャンパスをクリア
                
                //横に3本線を描きます
        };

        graph(); //実行!

});



3.jCanvasで横線を描く

ではでは色々描いていきましょう。
まずは横に2、3本線を引きたい気分です。

$(function(){

        //グラフを描画するよ!
        var graph = function() {
                ...
                
                //横に3本線を描きます
                var bc = '#999999';
                var bw = 0.5 * scale;
                var pd = 14.0 * scale;
                $canvas.drawLine({strokeStyle: bc, strokeWidth: bw,
                        x1: pd, y1: h - pd,
                        x2: w - pd, y2: h - pd,
                });
                $canvas.drawLine({strokeStyle: bc, strokeWidth: bw,
                        x1: pd, y1: h / 2,
                        x2: w - pd, y2: h / 2,
                });
                $canvas.drawLine({strokeStyle: bc, strokeWidth: bw,
                        x1: pd, y1: pd,
                        x2: w - pd, y2: pd,
                });
                
                //長方形をたくさん描きます
        };

        graph(); //実行!

});

drawLineという関数がありまする。
そこにstrokeStyle、strokeWidth、(x1,y1)、(x2,y2)を渡して3本描いてみました。




4.jCanvasで長方形を描いてみる

$(function(){

        //グラフを描画するよ!
        var graph = function() {
                ...
                
                //長方形をたくさん描きます
                var values = [3,4,7,10,15,13,21,17,15,14,18,19,24,30,38,49];
                var max = 50;
                for(var i = 0; i < values.length; i++) {
                        var v = values[i];
                        var x = (w - pd * 2) / (values.length + 1) * (i + 1) + pd;
                        var y = (h - pd * 2) * (1 - v / max) + pd;

                        var uw = (w - pd * 2) / (values.length + 1) - pd / 2;
                        var p1 = {'x': x-uw/2, 'y': y};
                        var p2 = {'x': x-uw/2, 'y': h - pd};
                        var p3 = {'x': x+uw/2, 'y': h - pd};
                        var p4 = {'x': x+uw/2, 'y': y};
                        
                        $canvas.drawLine({fillStyle: 'rgba(180, 180, 180, 0.5)', closed: true,
                                x1: p1.x, y1: p1.y,
                                x2: p2.x, y2: p2.y,
                                x3: p3.x, y3: p3.y,
                                x4: p4.x, y4: p4.y,
                        });
                }
                
                //丸をたくさん描きます
        };

        graph(); //実行!

});

同じくdrawLineですが、
(x1,y1)、(x2,y2)、(x3,y3)、(x4,y4)の4点を指定します。
fillStyleを指定し、closedをtrueにすれば中を塗りつぶすことができます。




5.jCanvasで丸を描いてみる

$(function(){

        //グラフを描画するよ!
        var graph = function() {
                ...
                
                //丸をたくさん描きます
                var values = [3,4,7,10,15,13,21,17,15,14,18,19,24,30,38,49];
                var max = 50;
                for(var i = 0; i < values.length; i++) {
                        var v = values[i];
                        var x = (w - pd * 2) / (values.length + 1) * (i + 1) + pd;
                        var y = (h - pd * 2) * (1 - v / max) + pd;

                        $canvas.drawEllipse({fillStyle: '#6c94b8', width: 6*scale, height: 6*scale,
                                x: x, y: y
                        });
                }
                
                //また線を描きます
        };

        graph(); //実行!

});

先ほどのfor文の中に記述します。

drawEllipseという関数があるので、こいつに座標などを指定してあげましょう。




6.jCanvasで点をつなぎまくる

$(function(){

        //グラフを描画するよ!
        var graph = function() {
                ...
                
                //また線を描きます
                var values = [3,4,7,10,15,13,21,17,15,14,18,19,24,30,38,49];
                var max = 50;
                var lineObj = {strokeStyle: '#6c94b8', strokeWidth: 1*scale, rounded: true};
                for(var i = 0; i < values.length; i++) {
                        var v = values[i];
                        var x = (w - pd * 2) / (values.length + 1) * (i + 1) + pd;
                        var y = (h - pd * 2) * (1 - v / max) + pd;
                        
                        lineObj['x'+(i+1)] = x;
                        lineObj['y'+(i+1)] = y;
                }
                $canvas.drawLine(lineObj);
        };

        graph(); //実行!

});

lineObjという配列にstrokeStyleやstrokeWithを指定し、
つなぎたい点を(x1,y1)、(x2,y2)、(x3,y3)...(xn,yn)として指定し、最後にdrawLineに入れればOKです。

2種類の関数でこんなグラフが描けました♪
横幅が画面サイズに対してAutoで変化する場合は

$(window).resize(function(){
        graph();
});

リサイズイベントに用意した関数を入れたりしましょう。


てなわけで実装したjsのコードは全体でこんな感じ

$(function(){

        //グラフを描画するよ!
        var graph = function() {
                var $wrapper = $('#canvas');
                var $canvas = $('#canvas canvas');
                
                //Retina対応
                var scale = 2.0; //Retinaで2倍
                var w = $wrapper.width() * scale;
                var h = $wrapper.height() * scale;
                $canvas.attr({'width': w, 'height': h});
                $canvas.width(w/scale); $canvas.height(h/scale);

                $canvas.clearCanvas(); //キャンパスをクリア
                
                //横に3本線を描きます
                var bc = '#999999';
                var bw = 0.5 * scale;
                var pd = 14.0 * scale;
                $canvas.drawLine({strokeStyle: bc, strokeWidth: bw,
                        x1: pd, y1: h - pd,
                        x2: w - pd, y2: h - pd,
                });
                $canvas.drawLine({strokeStyle: bc, strokeWidth: bw,
                        x1: pd, y1: h / 2,
                        x2: w - pd, y2: h / 2,
                });
                $canvas.drawLine({strokeStyle: bc, strokeWidth: bw,
                        x1: pd, y1: pd,
                        x2: w - pd, y2: pd,
                });
                
                var values = [3,4,7,10,15,13,21,17,15,14,18,19,24,30,38,49];
                var max = 50;
                var lineObj = {strokeStyle: '#6c94b8', strokeWidth: 1*scale, rounded: true};
                for(var i = 0; i < values.length; i++) {
                        var v = values[i];
                        var x = (w - pd * 2) / (values.length + 1) * (i + 1) + pd;
                        var y = (h - pd * 2) * (1 - v / max) + pd;

                        var uw = (w - pd * 2) / (values.length + 1) - pd / 2;
                        var p1 = {'x': x-uw/2, 'y': y};
                        var p2 = {'x': x-uw/2, 'y': h - pd};
                        var p3 = {'x': x+uw/2, 'y': h - pd};
                        var p4 = {'x': x+uw/2, 'y': y};
                        
                        //長方形をたくさん描きます
                        $canvas.drawLine({fillStyle: 'rgba(180, 180, 180, 0.5)', closed: true,
                                x1: p1.x, y1: p1.y,
                                x2: p2.x, y2: p2.y,
                                x3: p3.x, y3: p3.y,
                                x4: p4.x, y4: p4.y,
                        });
                        
                        //丸をたくさん描きます
                        $canvas.drawEllipse({fillStyle: '#6c94b8', width: 6*scale, height: 6*scale,
                                x: x, y: y
                        });
                        
                        lineObj['x'+(i+1)] = x;
                        lineObj['y'+(i+1)] = y;
                }
                //また線を描きます
                $canvas.drawLine(lineObj);
        };

        graph(); //実行!
        
        $(window).resize(function(){
                graph();
        });

});

ご自由に参考にしちゃってください。
ではでは。



この記事をシェア
この記事にコメントする
書き込む
あっきぃ(@appstars_aki)
Web、iOSなフリーランサーです。好きなものはお寿司です。でもお寿司は高いので普段は雑草とか拾ったドングリを食べています。お仕事や意味もなく毎月お小遣いをくれる人を探してます。

お仕事の依頼や自分で作ったアプリのレビューを希望しちゃう方はaki@appstars.jpまでご連絡ください。