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

我想制作一个带有html5画布的绘图工具,它只能绘制水平和垂直线

例如,尽管我将拖动鼠标,但它必须绘制垂直或水平线.
下面我将展示一个图像,我将展示我需要的东西……

谁能给我一些代码示例?

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

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

这是我的代码

HTML

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/

相关文章

操作步骤 1、进入elasticsearch的plugin,进入ik。进入config。 2、在config下面建立以.dic为后缀的字典...
lengend data数据中若存在'',则表示换行,用''切割。
代码实现 option = { backgroundColor: '#080b30', tooltip: { trigger: &...
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var data = &#...
前言 最近做了一个调查问卷导出的功能,需求是将维护的题目,答案,导出成word,参考了几种方案之后,选...
对于很多人来说,用字符编码都是熟能生巧,而不清楚为什么是那样的字符编码,所以我在这列了一个表,翻...