HTML5 Canvas : jCanvas : drawJSON関数

JSONデータを流し込んでCanvas(jCanvas使用)描画させる関数。

type
1：弧
2：二次方程式曲線
3：ベジェ曲線
4：楕円
5：画像
6：線
8：経路
9：ポリゴン
10：四角
11：一片
12：テキスト
13：ベクタ

drawJSON()関数

function drawJSON(canvasID, jsonString) {
    var jsonObject = JSON.parse(jsonString);
    console.log(jsonObject);
    jsonObject.forEach(function(value, index, ar) {
        switch(value.type) {
            case  1: // Arcs
                $('#' + canvasID).drawArc(value.data);
                break;
            case  2: // Quadratic Curves
                $('#' + canvasID).drawQuadratic(value.data);
                break;
            case  3: // Bezier Curves
                $('#' + canvasID).drawBezier(value.data);
                break;
            case  4: // Ellipses
                $('#' + canvasID).drawEllipse(value.data);
                break;
            case  5: // Images
                $('#' + canvasID).drawImage(value.data);
                break;
            case  6: // Lines
                $('#' + canvasID).drawLine(value.data);
                break;
            case  8: // Paths
                $('#' + canvasID).drawPath(value.data);
                break;
            case  9: // Polygons
                $('#' + canvasID).drawPolygon(value.data);
                break;
            case 10: // Rectangles
                $('#' + canvasID).drawRect(value.data);
                break;
            case 11: // Slices
                $('#' + canvasID).drawSlice(value.data);
                break;
            case 12: // Text
                $('#' + canvasID).drawText(value.data);
                break;
            case 13: // Vectors
                $('#' + canvasID).drawVector(value.data);
                break;
        }
    });
}

データ例

var datas = "[" +
    "{\"type\":  2, \"data\": {\"strokeStyle\": \"#FF00FF\", \"strokeWidth\": 4, \"rounded\": true, \"endArrow\": true, \"arrowRadius\": 15, \"arrowAngle\": 60, \"x1\": 50, \"y1\": 50, \"cx1\": 200, \"cy1\": 50, \"x2\": 250, \"y2\": 200}}," +
    "{\"type\":  3, \"data\": {\"strokeStyle\": \"#FF7700\", \"strokeWidth\": 4, \"rounded\": true, \"startArrow\": true, \"endArrow\": true, \"arrowRadius\": 15, \"arrowAngle\": 90, \"x1\": 100, \"y1\": 100, \"cx1\": 150, \"cy1\": 100, \"cx2\": 100, \"cy2\": 200, \"x2\": 150, \"y2\": 200, \"cx3\": 250, \"cy3\": 200, \"cx4\": 100, \"cy4\": 50, \"x3\": 250, \"y3\": 100}}," +
    "{\"type\":  4, \"data\": {\"fillStyle\": \"#c33\", \"x\": 150, \"y\": 250, \"width\": 200, \"height\": 100}}," +
    "{\"type\":  5, \"data\": {\"source\": \"./32px_house_001_b-trans.png\", \"x\": 350, \"y\": 250}}," +
    "{\"type\":  6, \"data\": {\"strokeStyle\": \"#00FF00\", \"strokeWidth\": 10, \"x1\": 100, \"y1\": 50,\"x2\": 100, \"y2\": 150, \"x3\": 200, \"y3\": 100, \"x4\": 150, \"y4\": 200}}," +
    "{\"type\":  8, \"data\": {\"strokeStyle\": \"#000\", \"strokeWidth\": 4, \"p1\": {\"type\": \"vector\", \"startArrow\": true, \"arrowAngle\": 60, \"arrowRadius\": 30, \"x\": 200, \"y\": 50, \"a1\": 225, \"l1\": 200}, \"p2\": {\"type\": \"quadratic\", \"cx1\": 150, \"cy1\": 250, \"x2\": 225, \"y2\": 200, \"endArrow\": true, \"arrowAngle\": 60, \"arrowRadius\": 30}}}," +
    "{\"type\":  9, \"data\": {\"fillStyle\": \"#3c6\", \"strokeStyle\": \"#083\", \"x\": 100, \"y\": 400, \"radius\": 50, \"sides\": 50, \"concavity\": 0.1}}," +
    "{\"type\": 10, \"data\": {\"fillStyle\": \"#0000FF\", \"x\": 500, \"y\": 100, \"width\": 200, \"height\": 100}}," +
    "{\"type\": 11, \"data\": {\"fillStyle\": \"#f63\", \"x\": 400, \"y\": 400, \"radius\": 150, \"start\": 60, \"end\": 120}}," +
    "{\"type\": 12, \"data\": {\"fillStyle\": \"#9cf\", \"strokeStyle\": \"#25a\", \"strokeWidth\": 2, \"x\": 150, \"y\": 100, \"fontSize\": 48, \"fontFamily\": \"Verdana, sans-serif\", \"text\": \"Hello\"}}," +
    "{\"type\": 13, \"data\": {\"strokeStyle\": \"#000\", \"strokeWidth\": 4, \"a1\": 135, \"l1\": 300}}," +
    "{\"type\":  1, \"data\": {\"strokeStyle\": \"#FF0000\", \"strokeWidth\": 5, \"x\": 300, \"y\": 100, \"radius\": 50,\"start\": 0, \"end\": 90}}" +
    "]";

drawJSON('canvas', datas);

html例

<!DOCTYPE html>
<html>
<head>
    <title>jCanvas drawJSON Example</title>
    <meta charset="UTF-8">
    <style>
        body {
            background: #dddddd;
        }
        #canvas {
            margin: 0px;
            padding: 0px;
            background: #ffffff;
            border: thin inset #aaaaaa;
            background-image: url("./kanto.gif");
         }
    </style>
    <script type="text/javascript" src="./jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="./jcanvas.min.js"></script>
    <script type="text/javascript" src="./jcanvas_drawJSON.js"></script>
</head>
<body>
    <canvas id='canvas' width=800' height='800'>
        Canvas not supported
    </canvas>
    <script src='drawJSONExample.js'></script>
</body>