繪圖線的JavaScript

有了你可以借鑑像這樣的javascript線帆布一個div，繪圖線的JavaScript

<html> 
<canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;"></canvas> 

<script> 
var c=document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
ctx.moveTo(20,20); 
ctx.lineTo(100,100); 
ctx.stroke(); 
</script> 
</html>

如何，我可以做同樣的事情，但是通過使用div標籤，而不是帆布？我想這樣做的原因是畫布似乎不適用於IE瀏覽器，我知道谷歌圖表使用div標籤而不是畫布繪製圖形，所以它可能是可能的。

我試圖用div替換畫布，但它不起作用。

來源

2014-01-07 Jason Samuels

對於非常簡單的一行，您可以使用HR標籤併爲其添加樣式。 –

從IE 9（http://caniuse.com/#search=canvas）開始支持Canvas。你不能用div來做到這一點。 – Robert

[這裏是一個小提琴]（http://jsfiddle.net/2Skmr/）複製你以前用帆布做的事情 – Pete

您可以創建一個標籤，如p或div，設置任意寬度的邊框，添加頂部邊框並將其附加到要創建線條的div中。

來源

2014-01-07 10:41:43

使用div標記呈現一些行。請參閱下面的代碼

<div style="width: 112px; height: 47px; border-bottom: 1px solid black; -webkit-transform: translateY(-20px) translateX(5px) rotate(27deg); position: absolute;/* top: -20px; */"></div> 
<div style="width: 112px; height: 47px; border-bottom: 1px solid black; -webkit-transform: translateY(20px) translateX(5px) rotate(-26deg); position: absolute;top: -33px;left: -13px;"></div>

希望它有幫助。

小提琴鏈接：

http://jsfiddle.net/NATnr/45/

感謝，

溼婆

來源

2014-01-07 10:52:11 SivaRajini

您可以使用CSS3 2D變換http://jsfiddle.net/dmRhL/：

.line{ 
    width: 150px; 
    transform: translate(50px,100px) rotate(30deg); 
    -ms-transform: translate(50px,100px) rotate(30deg); /* IE 9 */ 
    -webkit-transform: translate(50px,100px) rotate(30deg); /* Safari and Chrome */ 
}

不過貌似你的問題是老IE瀏覽器說，噸可能無濟於事。

您可以嘗試使用excanvas - 一個使用IE的VML渲染器模擬canvas元素的JS庫。

或者某些2D繪圖框架將根據瀏覽器支持使用畫布或SVG。您可以在http://en.wikipedia.org/wiki/JavaScript_graphics_library

來源

2014-01-07 11:00:51

的完整列表使用jQuery：

<div id='rPaper'></div>

jQuery的

x1 = 50, y1 = 50, 
x2 = 350, y2 = 50; 
drawnode(x1, y1); 
drawnode(x2, y2); 
drawline(x1, y1, x2, y2); 


function drawnode(x, y) { 

    var ele = "" 
    var style = ""; 
    style += "position:absolute;"; 
    style += "z-index:100;" 
    ele += "<div class='relNode' style=" + style + ">"; 
    ele += "<span> Test Node</span>" 
    ele += "<div>" 

    $('#rPaper').show(); 
    var node = $(ele).appendTo('#rPaper'); 
    var width = node.width(); 
    var height = node.height(); 

    var centerX = width/2; 
    var centerY = height/2; 

    var startX = x - centerX; 
    var startY = y - centerY; 

    node.css("left", startX).css("top", startY); 

} 

function drawline(ax, ay, bx, by) { 
    console.log('ax: ' + ax); 
    console.log('ay: ' + ay); 
    console.log('bx: ' + bx); 
    console.log('by: ' + by); 


    if (ax > bx) { 
     bx = ax + bx; 
     ax = bx - ax; 
     bx = bx - ax; 
     by = ay + by; 
     ay = by - ay; 
     by = by - ay; 
    } 


    console.log('ax: ' + ax); 
    console.log('ay: ' + ay); 
    console.log('bx: ' + bx); 
    console.log('by: ' + by); 

    var angle = Math.atan((ay - by)/(bx - ax)); 
    console.log('angle: ' + angle); 

    angle = (angle * 180/Math.PI); 
    console.log('angle: ' + angle); 
    angle = -angle; 
    console.log('angle: ' + angle); 

    var length = Math.sqrt((ax - bx) * (ax - bx) + (ay - by) * (ay - by)); 
    console.log('length: ' + length); 

    var style = "" 
    style += "left:" + (ax) + "px;" 
    style += "top:" + (ay) + "px;" 
    style += "width:" + length + "px;" 
    style += "height:1px;" 
    style += "background-color:black;" 
    style += "position:absolute;" 
    style += "transform:rotate(" + angle + "deg);" 
    style += "-ms-transform:rotate(" + angle + "deg);" 
    style += "transform-origin:0% 0%;" 
    style += "-moz-transform:rotate(" + angle + "deg);" 
    style += "-moz-transform-origin:0% 0%;" 
    style += "-webkit-transform:rotate(" + angle + "deg);" 
    style += "-webkit-transform-origin:0% 0%;" 
    style += "-o-transform:rotate(" + angle + "deg);" 
    style += "-o-transform-origin:0% 0%;" 
    style += "-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .1);" 
    style += "box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .1);" 
    style += "z-index:99;" 
    $("<div style='" + style + "'></div>").appendTo('#rPaper'); 
}

Demo

// right top -> left bottom 
    x1 = 850, y1 = 150, 
    x2 = 550, y2 = 250; 
drawnode(x1, y1); 
drawnode(x2, y2); 
drawline(x1, y1, x2, y2);

Demo

// right bottom -> left top 
    x1 = 750, y1 = 150, 
    x2 = 550, y2 = 50; 
drawnode(x1, y1); 
drawnode(x2, y2); 
drawline(x1, y1, x2, y2);

Demo

// left top -> right bottom 
    x1 = 150, y1 = 150, 
    x2 = 350, y2 = 350; 
drawnode(x1, y1); 
drawnode(x2, y2); 
drawline(x1, y1, x2, y2);

Demo

// vertical line: down -> up 
    x1 = 150, y1 = 350, 
    x2 = 150, y2 = 150; 
drawnode(x1, y1); 
drawnode(x2, y2); 
drawline(x1, y1, x2, y2);

Demo

來源

2014-01-07 11:31:40

其他答案比這個更好...如果需要的話，它使用PURE CSS。

<head> 
<style> 
#i1,#i2,#i3,#i4,#i5,#i6,#i7,#i8{border-right:2px solid black; height:2px;} 
#i1{width:30px;}#i2{width:31px;}#i3{width:32px;}#i4{width:33px;}#i5{width:34px;}#i6{width:35px;}#i7{width:36px;}#i8{width:37px;} 
</style> 
</head> 

<div id="i1"></div> 
<div id="i2"></div> 
<div id="i3"></div> 
<div id="i4"></div> 
<div id="i5"></div> 
<div id="i6"></div> 
<div id="i7"></div> 
<div id="i8"></div>

如果你需要繪製軸線平行的線，你可以把寬度或高度爲1像素，並增加了其他。小提琴here。

來源

2014-01-07 11:59:49

繪圖線的JavaScript

回答

相關問題