如何仅绘制垂直和水平线（画布）

Posted 2023-05-08

【中文标题】如何仅绘制垂直和水平线（画布）

【英文标题】：how draw only vertical and horizontal lines (Canvas)

【发布时间】：2014-05-04 12:01:27

【问题描述】：

我想做一个html5画布的绘图工具，只能画横线和竖线

例如，无论我以哪种方式拖动鼠标，它都必须绘制垂直线或水平线。 下面我将展示一张图片，我将在其中展示我需要的东西......

谁能给我一些代码示例？

【问题讨论】：

绘制时，只需保持第二端的X或Y（取决于方向）与起点的相同，而不是鼠标的。

这类事情需要一些三角函数来进行计算。

到目前为止你尝试过什么？

你只需要使用一些逻辑，没有插件会有所帮助，请查看下面的解决方案

【参考方案1】：

这是你必须使用一些逻辑或算法的东西。我在这里所做的是计算dx和dy，即更改x和更改y。

当x 的变化更多时（dx>dy）保持y 不变，反之亦然。

这是我的代码

HTML

<canvas id="myCanvas"   style="border:1px solid #d3d3d3;">

jQuery

var prvX = -300;
var prvy = -300;
$('#myCanvas').bind("mousemove",function(e)

    var c=document.getElementById("myCanvas");
    c.width=c.width;  
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(20,20);
    var dx = Number(e.offsetX) - Number(prvX);
    var dy = Number(e.offsetY) - Number(prvy);
    if(Number(dx)>Number(dy))
    
      ctx.lineTo(e.offsetX,20);            
    
     else
     
      ctx.lineTo(20,e.offsetY); 
     
     prvX =e.offsetX;
     prvy=e.offsetY;    
     ctx.stroke(););

小提琴

http://jsfiddle.net/zhq5n/4/

GameAlchemist 的更好

http://jsfiddle.net/gamealchemist/zhq5n/5/

【讨论】：

这是一个很好的接触 :-) .. 谢谢

@GameAlchemist 将其添加到答案中（y）

你是对的，如果你愿意，可以随意放代码:-)