0

首先，我不是 HTML5 的专家。几天前我开始用 HTML5 做一些事情。

其次，对不起我的英语，我不是很擅长，可能会犯一些错误。

这是我的问题...

我可以用两次鼠标点击画一条线，这条线从第一个点击点开始，到第二个点击点结束。

但我想创建一条从第一个点击点开始的线，根据鼠标的位置改变它的方向和尺寸，然后在第二个点击点结束。（就像 Android 中的图形密码系统。）

这可能吗？

我发现一些代码只能通过两次鼠标单击来绘制一条线，我对其进行了一些更改并自己添加了一些代码。这是我的最终代码：

<!DOCTYPE HTML>
<html>

  <head>

    <style>
        body {
            margin: 0px;
            padding: 0px;
        }
            #myCanvas {
            border: 1px solid #9C9898;
        }
    </style>

    <script src="jquery.js"></script>
    <script type="text/javascript">

        $(function(){

            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");

            var point1 = new Array();
            point1['x'] = false;
            point1['y'] = false;
            var point2 = new Array();
            point2['x'] = false;
            point2['y'] = false;

            $(document).click(function(event){

                if ( false === point1['x'] || false === point1['y']) {

                    var posX1 = event.pageX;
                    var posY1 = event.pageY;

                    point1['x'] = posX1;
                    point1['y'] = posY1;

                }

                else if ( false === point2['x'] || false === point2['y'] ) {

                    var posX2 = event.pageX;            
                    var posY2 = event.pageY;

                    point2['x'] = posX2;
                    point2['y'] = posY2;
                    console.log("second");

                    context.moveTo(point1['x'], point1['y']);
                    context.lineTo(point2['x'], point2['y']);
                    context.stroke();

                    point1['x'] = point2['x'];
                    point1['y'] = point2['y'];  
                    point2['x'] = false;
                    point2['y'] = false;

                }

            });

        });

    </script>

  </head>

  <body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
  </body>

</html>
4

1 回答 1

0

当您移动鼠标时，您将需要某种动画循环来绘制从第一次单击到鼠标坐标的线（每隔几毫秒清除画布并使用鼠标的新位置更新画布上的线），然后一旦发生第二次单击，在最终绘制后停止动画循环，将线条留在画布上。

将两个画布放在彼此的顶部可能也是值得的（一个用于绘制动画线“未来”，另一个用于实际存储图像）。这样，当您完成绘制第一条线并开始第二条线时，随后的清除不会影响下方画布上存储的线。

希望这可以帮助。

问候，加里

于 2012-06-12T17:04:05.047 回答