Question

首先，我不是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>

Answer 1

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

将两幅画布相互叠加也可能是值得的（一幅用于绘制动画线'待定'，另一幅用于实际存储图像）。这样，当您完成绘制第一行并开始第二行后，后续清除将不会影响下方画布上的存储行。

希望这有帮助。

此致加里

HTML5 Canvas绘制一条方向和尺寸发生变化的线条

1 个答案: