html 水平线 垂直线,javascript – 如何只绘制垂直和水平线(Canvas)

这是你必须使用一些逻辑或算法的东西.我在这里做的是计算dx和dy,即x的变化和y的变化.

当x的变化更大(dx> dy)时,保持y不变,反之亦然.

这是我的代码

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();});

小提琴

GameAlchemist在这里更好