我想制作一个带有html5画布的绘图工具,它只能绘制水平和垂直线
例如,尽管我将拖动鼠标,但它必须绘制垂直或水平线 下面我将展示一个图像,我将展示我需要的东西......
任何人都可以给我一些代码示例吗?
答案 0 :(得分:4)
这是你必须使用某些逻辑或算法的东西。我在这里做的是计算dx
和dy
,即改变x
并改变y
1}}。
当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();});
<强>小提琴强>
GameAlchemist在这里更好一个