`
猪↘專屬|华
  • 浏览: 164012 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

js画矩形

阅读更多

    <script type="text/javascript">
       function  drawRectangle(x0,y0,x1,y1,color,style)
       {
       if  (x0  ==  x1  ||  y0  ==  y1)  return;
       if  (x0>x1)  {var  t=x0;x0=x1;x1=t;}
       if  (y0>y1)  {var  t=y0;y0=y1;y1=t;}
       //dashed
        return  "<table style='top:"+y0+";left:"+x0+";border-style:solid;border-color:"+color+"'><td width="+(x1-x0)+"  height="+(y1-y0)+"></td></table>";
       }
       function  testDrawRectangle(zrl,curr,alarm)
       {
           //alert(zrl+curr+alarm);
          var  div1=document.getElementById('reg');
          div1.innerHTML=drawRectangle(100,100,200,400,"black");
          
       }
    </script>

  • 大小: 11.5 KB
1
0
分享到:
评论

相关推荐

    一个简单的JS画矩形代码

    综上所述,这个简单的JS画矩形代码利用了HTML5的`canvas`元素和其相关的绘图API,结合鼠标事件监听,实现了动态交互的矩形绘制功能。通过这个实例,我们可以更好地理解JavaScript在网页动态效果中的应用,并为进一步...

    js 画矩形程序(可以画多个)(按下ctrl或者shift键clear all)

    【标题】"js 画矩形程序(可以画多个)(按下ctrl或者shift键clear all)" 描述了一段JavaScript代码,用于在网页上绘制多个矩形,并提供了键盘快捷键(Ctrl或Shift)来清除所有图形的功能。这个程序的核心是利用HTML5...

    jquery 图片上画矩形

    然后,使用jQuery来处理鼠标事件,实现画矩形的功能。主要涉及到`mousedown`(鼠标按下)、`mousemove`(鼠标移动)和`mouseup`(鼠标抬起)事件: ```javascript $(document).ready(function() { var startX, ...

    利用canvas来根据鼠标的移动来画矩形

    为了根据鼠标的移动来画矩形,我们需要监听鼠标的相关事件,比如`mousedown`(鼠标按下)、`mousemove`(鼠标移动)和`mouseup`(鼠标抬起)。当`mousedown`事件触发时,记录下鼠标的起始位置,作为矩形的左上角坐标...

    vue实现在图片中画矩形框,并得到图片中的对角坐标,测试可用版本

    在Vue.js框架中实现图像上绘制矩形框并获取对角坐标的功能,是常见的图像处理需求,例如在图像标注、对象检测等应用场景中。本文将详细介绍如何在Vue项目中完成这个任务。 首先,我们需要了解Vue的基本概念。Vue.js...

    vue实现在图片中画矩形框,并得到对角坐标,设置map中area的样式.zip

    在Vue项目中实现图片上画矩形框并获取对角坐标以及设置`&lt;map&gt;`中的`&lt;area&gt;`样式,涉及到的技术主要包括JavaScript、HTML5的绘图API以及图像热区技术。接下来,我们将深入探讨这些知识点。 1. **JavaScript绘图API**...

    html+js 上传图片,在图片上拖拽鼠标,画矩形

    以上就是使用HTML和JavaScript实现“在图片上拖拽鼠标画矩形”的主要步骤和技术点。这个功能结合了文件读取、Canvas绘图和事件处理,是Web开发中一个很好的实践案例。通过理解并掌握这些知识,开发者可以创建出更多...

    9.(leaflet篇)leaflet矩形采集与矩形编辑.zip

    这些知识在实际应用中非常广泛,例如,你可以创建一个地图应用,用户可以在地图上画出矩形区域,然后获取该区域的面积,或者用作地理围栏设定,触发特定的业务逻辑。 总结,Leaflet提供的矩形采集与编辑功能,结合...

    html事件如何改变矩形大小-JavaScript-来改变矩形大小

    这样,当 JavaScript 改变矩形的 `width` 和 `height` 属性时,过渡效果会自动应用,使矩形大小变化更加流畅。 此外,如果使用 jQuery 库,可以利用其提供的 `animate` 方法实现更复杂的动画效果: ```javascript ...

    vue+konva.js(未使用vue-konva)实现数据标注矩形和多边形功能

    Vue.js是一种流行的前端JavaScript框架,它提供了组件化开发模式,使得构建可复用和易于维护的用户界面变得简单。Konva.js则是一个2D画布库,它允许我们在Web浏览器中进行高性能的图形处理。 首先,让我们理解Vue....

    web页面实现画图功能,画矩形及拖拽功能

    通过这种方式,我们可以在Web页面上实现画图功能,允许用户画矩形并拖动它们,提供了一种交互式的用户体验。这个实现可以作为基础,进一步扩展到支持更多形状的绘制、颜色选择、撤销/重做操作等功能。

    canvas-draw-panel-master.zip_html5_画矩形

    例如,画矩形的API是: ```javascript // 参数:x轴起点坐标,y轴起点坐标,矩形宽度,矩形高度 ctx.fillRect(x, y, width, height); // 参数:x轴起点坐标,y轴起点坐标,矩形宽度,矩形高度,边框宽度,边框颜色...

    canvas画矩形(包括渐变)

    这篇博客"canvas画矩形(包括渐变)"探讨了如何使用Canvas API来绘制矩形,并且介绍了如何创建和应用线性渐变效果。在本文中,我们将深入探讨这些概念,以帮助你更好地理解和运用它们。 首先,Canvas API提供了两个...

    js+html5实现canvas绘制简单矩形的方法

    接下来,我们将通过JavaScript代码来实现矩形的绘制。首先,我们需要使用`document.getElementById`方法获取Canvas元素的引用,然后调用`getContext("2d")`方法来获取Canvas的二维渲染上下文。之后,我们可以使用这...

    js原生方法绘制椭圆,矩形,箭头

    在JavaScript中,我们可以利用HTML5的Canvas API来实现原生方法绘制椭圆、矩形以及箭头。Canvas API提供了一套丰富的绘图接口,允许开发者在网页上进行动态的图形绘制。下面我们将深入探讨如何使用这些API来实现这些...

    QML--Canvas画布实现矩形圆形等圈定

    它提供了JavaScript API,允许开发者直接在2D画布上绘制图形,包括但不限于矩形、圆形以及其他几何形状。QML(Qt Meta Language)是Qt框架的一部分,主要用于创建富交互式用户界面,而qt5是Qt框架的第五个主要版本,...

    SVG制作圆角矩形代码

    此外,SVG还支持动画和交互,可以通过CSS或JavaScript进行更复杂的设计。例如,可以改变圆角矩形的颜色、大小,甚至响应用户的点击事件。SVG的灵活性和可扩展性使得它成为了现代Web开发中不可或缺的一部分。 总的来...

    HTML5+JavaScript动画基础(文本+源码)

    Canvas API提供了丰富的绘图函数,如fillRect()用于填充矩形,arc()用于绘制圆形或弧形,以及drawImage()用于在画布上显示图像,这些都是制作动画的基础。 JavaScript作为主要的脚本语言,负责控制动画的时间序列和...

    JavaScript canvas绘制圆角矩形.html

    Canvas 中文名称叫“画布”,它是游戏中所有UI组件的“容器”。一个场景中,可以允许多个Canvas对象的存在,还允许Canvas之间可以进行“嵌套”使用。需要注意的是,场景中的任何一个UI对象,都肯定是某个Canvas对象...

    计算机软件-商业源码-实例二--渐变色和动画矩形效果.zip

    这个“计算机软件-商业源码-实例二--渐变色和动画矩形效果.zip”文件提供了一个示例,展示了如何在程序中实现动态的渐变色和矩形动画效果。下面我们将详细探讨这些技术及其背后的原理。 首先,让我们来理解“渐变色...

Global site tag (gtag.js) - Google Analytics