[英]how draw only vertical and horizontal lines (Canvas)
I want to make one drawing tool with html5 canvas, that can draw only horizontal and vertical lines 我想用html5 canvas做一个绘图工具,它只能画水平和垂直线
For example despite which way I will drag the mouse it must draw vertical or horizontal line. 例如,尽管我将以哪种方式拖动鼠标,但它必须绘制垂直或水平线。
Below I will show one image where i will show what i need... 下面我将显示一张图片,其中我将显示我需要的...
can any one give me some code example ? 谁能给我一些代码示例?
This is something that you have to use some logic or algorithm for.What I have done here is to Calculate dx
and dy
, ie change in x
and change in y
. 这是您必须使用某种逻辑或算法的事情。我在这里所做的是计算
dx
和dy
,即x
变化和y
变化。
When change in x
is more ( dx>dy
) keep your y
constant, and vice versa. 当
x
变化更大( dx>dy
)时,保持y
不变,反之亦然。
Here's my code 这是我的代码
HTML 的HTML
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Jquery 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();});
Fiddle 小提琴
http://jsfiddle.net/zhq5n/4/ http://jsfiddle.net/zhq5n/4/
Better one here by GameAlchemist GameAlchemist在这里更好的一个
http://jsfiddle.net/gamealchemist/zhq5n/5/ http://jsfiddle.net/gamealchemist/zhq5n/5/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.