0

このコードを使用して、.json ファイルから行の説明を読み込み、記述された行を Canvas に描画します。

<html>
    <head>
    <script type="text/javascript" src="jQuery.js"> </script>
        <script type="text/javascript">
        var canvas;
        var context;
        function Line(x1, y1, x2, y2, color) 
        {
            canvas = document.getElementById("canvas_1");
            context = canvas.getContext("2d");

            this.x1 = x1;
            this.y1 = y1;
            this.x2 = x2;
            this.y2 = y2;
            this.color = color;
        }
        Line.prototype.draw = function() {
            context.beginPath();
            context.moveTo(this.x1, this.y1);
            context.lineTo(this.x2, this.y2);
            context.strokeStyle = this.color;
            context.stroke();
        }
        onload=function simpleExample()
        {
            $(document).ready(function() 
            {
                // draw line with cordinates read from points.json file
                $.getJSON('points.json', function(data)
                {   
                    var line = new Line(data.line.point1.x, data.line.point1.y, data.line.point2.x, data.line.point2.y, data.line.color);
                    line.draw(context);
                });

            });
        }
        </script>
    <head>
    <body>
        <canvas height="500" width="500" id="canvas_1"></canvas>
    </body>
</html>`

私の points.json ファイルは次のようになります。

{
"line": {
    "point1": {
        "x": "50",
        "y": "50"
    },
    "point2": {
        "x": "100",
        "y": "100"
    },
    "color": "red"
}

}

キャンバス上でこの行を移動する機能を追加したいのですが、今は方法がわかりません。私の課題は.jsonファイルから行の説明をロードし、その行をキャンバスに描画することであるため、アドバイスが必要です(私が行ったようにjQueryでロードする必要はありません。誰かがそれを行う他の方法を知っている場合は、書いてくださいこれを行う方法の例）。

ありがとう、アレクサンドル

4

0 に答える 0