`
wensuper
  • 浏览: 68441 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

使用JS画直线

阅读更多
作者:chenwei

使用JS画直线:包括水平线与垂直线


function drawhline(from_x,to_x, y)
{
  for(var i=from_x;i<=to_x;i+=10) 
  {
    //设置div的背景
    var $divs = $("<div style='background-color: red;z-index: 2'></div>");
    //设置div的左侧位置
    $divs.css("left",i);
    //设置div的上方位置
    $divs.css("top",y);
    //设置div的高度
    $divs.css("height","5px");
    //设置div的宽度
    $divs.css("width","2px");
    //设置div的排板方式
    $divs.css("position","absolute");
    //把div追加到body上去
    $("body").append($divs);
  }
}

function drawvline(from_y,to_y, x)
{

  for(var i=from_y;i<=to_y;i+=10) 
  {
    var $divs = $("<div style='background-color: red;z-index: 2'></div>");
    $divs.css("left",x);
    $divs.css("top",i);
    $divs.css("height","2px");
    $divs.css("width","5px");
    $divs.css("position","absolute");
    $("body").append($divs);
  }
}


分享到:
评论

相关推荐

    js画直线带箭头哦

    在JavaScript中绘制直线并添加箭头是一项常见的图形编程任务,主要应用于网页动态效果、数据可视化或游戏开发等场景。本文将深入探讨如何使用JavaScript的基本绘图API,即HTML5的Canvas API来实现这一功能。 Canvas...

    Bresenham画直线算法

    ### Bresenham画直线算法详解 #### 一、引言 Bresenham画直线算法是一种用于在离散坐标系上绘制直线的算法。它由Jack E. Bresenham于1962年发明,并因其高效性而被广泛应用于计算机图形学中。与早期的画线算法相比...

    百度地图画直线

    本话题聚焦于“百度地图画直线”这一主题,它涉及到如何使用百度地图JavaScript API来在地图上绘制直线,这对于路线规划、地理定位或者数据分析等应用场景具有重要意义。 百度地图API是百度提供的一项服务,它允许...

    JavaScript-拖拽画直线

    JavaScript-拖拽画直线

    js 画图--简单的直线图

    本篇文章将探讨如何使用JS来创建一个简单的直线图。我们将会分析标题“js 画图--简单的直线图”所涉及的核心知识点,并结合描述中的博文链接进行深入讲解。 首先,我们要知道在浏览器环境中,JavaScript不能直接...

    我写的画直线和画箭头的js方法(包含单击事件)

    这是我在工作中写的一个画箭头的方法,还可以画直线,支持单击事件,我觉得这个方法写的还不错,欢迎下载使用,如有不懂或想在这基础上添加功能,请与我联系。QQ:526125929

    用JavaScript画直线、圆、椭圆(不用VML,Canvas) | #hta #javascript #2d

    在JavaScript中,通常我们使用HTML5的Canvas API来绘制图形,如直线、圆和椭圆。但是,在不支持Canvas或需要兼容旧版浏览器的情况下,我们可以借助其他技术来实现这些功能。本篇将介绍如何在不使用Canvas的情况下,...

    wz_jsgraphics.js 在图片上画直线、圆、矩形

    1. **直线绘制**:在`wz_jsgraphics.js`中,可以使用`lineTo(x, y)`方法来绘制一条从当前绘图位置到指定坐标(x, y)的直线。为了开始绘制,先调用`beginPath()`,然后使用`moveTo(x, y)`设置起点,最后调用`stroke()`...

    js炫酷小球沿着直线跑动导航条特效源码分享

    【标题】"js炫酷小球沿着直线跑动导航条特效源码分享"涉及的核心知识点主要集中在JavaScript(js)编程语言、网页动态效果的实现以及前端用户体验设计。在这个项目中,开发者利用JavaScript来创建一个独特且吸引人的...

    svg画直线中间箭头

    本文将详细讲解如何使用SVG在一条直线上绘制中间的箭头。 首先,SVG的基本结构是由一系列的元素构成的,包括矩形(rect)、圆形(circle)、路径(path)等。在SVG中绘制直线,我们可以使用`&lt;line&gt;`元素。例如,要...

    js直线波浪线

    在JavaScript(JS)中创建直线波浪线效果可以用于网页设计中的各种动态视觉元素,比如动画背景、边框效果或者自定义图形。本教程将详细解释如何利用JS来实现这样的效果,以及如何通过提供的"Demo[下划波浪线]"案例...

    纯js绘制直线,圆,正弦曲线等(不完整)

    本资源虽然不完整,但提供了使用纯JavaScript绘制直线、圆以及正弦曲线的基础方法,这对于我们理解Canvas的绘图原理和实践非常有帮助。 首先,我们从创建Canvas元素开始。在HTML中,可以使用`&lt;canvas&gt;`标签来创建一...

    用html4画直线

    在html4的网页上画直线,不是用html5.

    javaScript制作动画

    JavaScript社区提供了许多现成的缓动函数库,如Glow或Tween.js。 3. **帧动画与requestAnimationFrame**:`requestAnimationFrame`是JavaScript中专为动画设计的API,它会在浏览器下一次重绘之前调用提供的回调函数...

    SVG路径直线动画.rar

    总结来说,SVG路径直线动画是SVG图形技术的一个重要应用场景,通过使用SVG的`&lt;path&gt;`元素、SMIL动画、CSS动画或JavaScript库,我们可以创造出各种各样的直线移动动画,这在网页设计、交互式UI和数据可视化等领域具有...

    自制小画布工具(HTML5+JS)

    Canvas通过JavaScript API提供了一系列方法,如`fillRect()`, `strokeRect()`, `beginPath()`, `moveTo()`, `lineTo()`等,用于绘制直线、曲线、矩形、圆形等图形。在这个小画布工具中,Canvas被用来接收用户的鼠标...

    加载动画(直线型)

    例如,对于直线型加载动画,可以使用JavaScript定时器来定期改变线条的长度,以模拟加载过程。 2. **CSS3**:CSS3提供了丰富的动画功能,如`@keyframes`规则,可以定义动画的起始状态和结束状态,以及在动画过程中...

    html带箭头的直线(javaScript实现)

    线条控制已经做了封装 var line = new Line(); 挂号的四个值代表x1、y1、x2、y2 x1,y1表示起始点坐标 x2、y2表示结束点坐标(有箭头的一边) line.drawArrowLine(10, 10, 10, 100); 删除线条 line.remove() ...

    微信小程序canvas画布绘制矩形、椭(圆)、直线、文字

    本文将深入探讨如何使用Canvas API在微信小程序中绘制矩形、椭圆、直线以及添加文字。 首先,我们需要在小程序的页面JSON配置文件中引入Canvas组件,并在对应的WXML文件中进行布局。例如: ```json { "component...

    canvas绘制的直线动画

    在JavaScript部分,我们定义了一个名为`Anim`的构造函数,用于创建直线动画。这个构造函数接收一个选项对象`opt`作为参数,包含了绘制直线动画所需的所有配置: 1. `Node`: 指向Canvas的2D渲染上下文。 2. `color`:...

Global site tag (gtag.js) - Google Analytics