微科社区,轻松开发从此开始! 请登陆 免费注册

微科社区

当前位置:首页 > Java平台 > Servlet/JSP >

JS画线,有点原始,但是兼容所有浏览器!

时间:2017-01-12 03:13  浏览:努力统计中...
用Javascript画线的方法很多,有SVG,VML、canvas等,但是在现阶段,貌似这些方法都不能兼容所有浏览器。所以我还是用最原始的办法法写了一个画线方法。思路也很简单,就是用一个像素

用Javascript画线的方法很多,有SVG,VML、canvas等,但是在现阶段,貌似这些方法都不能兼容所有浏览器。所以我还是用最原始的办法法写了一个画线方法。思路也很简单,就是用一个像素的DIV拼成一条线。

Js代码  
  1. function line(startX, startY, endX, endY, container) {   
  2.     if (startX == endX) {   
  3.         if (startY > endY) {   
  4.             var tempY = startY;   
  5.             startY = endY;   
  6.             endY = tempY;   
  7.         }   
  8.         for (var k = startY; k < endY; k++) {   
  9.             createPoint(container, startX, k);   
  10.         }   
  11.     }   
  12.     // y = ax + b   
  13.     var a = (startY - endY) / (startX - endX);   
  14.     var b = startY - ((startY - endY) / (startX - endX)) * startX;   
  15.     if (Math.abs(startX - endX) > Math.abs(startY - endY)) {   
  16.         if (startX > endX) {   
  17.             var tempX = endX;   
  18.             endX = startX;   
  19.             startX = tempX;   
  20.         }   
  21.         var left = container.style.left;   
  22.         var top = container.style.top;   
  23.         for (var i = startX; i <= endX; i++) {   
  24.             createPoint(container, i, a * i + b);   
  25.         }   
  26.     } else {   
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线------
栏目列表
推荐内容