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

Question

我想用html5 canvas做一个绘图工具，它只能画水平和垂直线

例如，尽管我将以哪种方式拖动鼠标，但它必须绘制垂直或水平线。
下面我将显示一张图片，其中我将显示我需要的...

谁能给我一些代码示例？

Answer 1

这是您必须使用某种逻辑或算法的事情。我在这里所做的是计算dx和dy ，即x变化和y变化。

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

这是我的代码

的HTML

<canvas id="myCanvas" width="300" height="150" 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/