Fatal编程技术网

Javascript HTML5画布拖放行

javascript json html canvas

Javascript HTML5画布拖放行,javascript,json,html,canvas,drag,Javascript,Json,Html,Canvas,Drag,我使用以下代码从.json文件加载行描述，并在画布上绘制所描述的行： <html> <head> <script type="text/javascript" src="jQuery.js"> </script> <script type="text/javascript"> var canvas; var context; function Line(x1

我使用以下代码从.json文件加载行描述，并在画布上绘制所描述的行：

<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>`
}

现在我想添加在画布上移动这条线的功能，但我现在不知道如何。 我需要建议，因为我的任务是从.json文件加载行描述，以便在画布上绘制该行（它不必像我那样使用jQuery加载，如果有人知道其他方法，请编写一些示例来实现）

谢谢，
Aleksandar

你能更详细地描述一下你在画布上移动线条的意思吗？线条是否需要设置动画？如果是这样，它应该如何设置动画？直线可以是由点确定的多段线。当我拖动它时，它需要在拖动过程中可见。我用.json文件中定义的简单行解决了这个问题，比如在我的示例中，当我有3个点时，这就是问题所在。我有一个想法，使用jQuery加载.json，或者使用kineticJS根据json文件中的数据绘制可拖动的线。 
{
"line": {
    "point1": {
        "x": "50",
        "y": "50"
    },
    "point2": {
        "x": "100",
        "y": "100"
    },
    "color": "red"
}