HTML5画布绘制一条线，其方向和尺寸变化

首先，我不是HTML5的专业人士。几天前我开始用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>

来源

2012-06-12 mikrobik

如何将线知道改变方向？你是指第二点的曲线吗？ – Loktar

对不起，双重评论，只是看你的Android锁屏说明。无论如何，您可以在行动中发布该示例的视频或屏幕截图？有很多自定义的android锁屏，所以我不知道你指的是哪一个。 – Loktar

我找不到关于它的视频，对不起。我试图解释这一点：http://zapp5.staticworld.net/howto/graphics/184659-android29_180.jpg 用户从一个点开始，然后将他/她的手移动到不同的点，在这两个点之间出现一条线。当用户将他/她的手移动到不同的点时，起始点保持不变并且线的方向改变。 – mikrobik

您将需要某种形式的动画循环的从你第一次点击鼠标坐标画线，当您移动鼠标（每隔几毫秒清除画布和更新线路在画布上放置鼠标的新位置），然后一旦发生第二次点击，停止最终绘制后的动画循环，将线条留在画布上。

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

希望这会有所帮助。

问候，加里

来源

2012-06-12 17:04:05 Gary

我会尝试这些方法。我希望他们中的一个会工作。谢谢加里。 – mikrobik

HTML5画布绘制一条线，其方向和尺寸变化

回答

相关问题