cách tạo vòng kết nối bằng cách sử dụng javascript

Question

Làm cách nào để tạo Vòng kết nối trong Html bằng javascript. Liệu nó có thể được thực hiện bằng cách sử dụng Javascript hay không? Tôi đã thực hiện việc tạo hình chữ nhật và hình vuông nhưng không biết cách hoàn thành một vòng tròn.

Answer 1

Bạn cần phải sử dụng liabrary sau: -

Đặt mã trong thẻ đầu của bạn.

<script type="text/JavaScript" src="jsDraw2D.js"></script> 

Nó có sẵn để tải về từ here

Sao chép và dán đoạn mã sau nơi bạn muốn vòng tròn của bạn xuất hiện ...

<script type="text/JavaScript"> 

//Create jsGraphics object 
var gr = new jsGraphics(document.getElementById("canvas")); 

//Create jsColor object 
var col = new jsColor("red"); 

//Create jsPen object 
var pen = new jsPen(col,1); 

//Draw a Line between 2 points 
var pt1 = new jsPoint(20,30); 
var pt2 = new jsPoint(120,230); 
gr.drawLine(pen,pt1,pt2); 

//Draw filled circle with pt1 as center point and radius 30. 
gr.fillCircle(col,pt1,30); 

//You can also code with inline object instantiation like below 
gr.drawLine(pen,new jsPoint(40,10),new jsPoint(70,150)); 

</script> 

Bạn có thể kiểm tra tài liệu này từ here

Answer 2

Bạn có thể sử dụng một số thư viện javascript cho giống nhau. Giống như đây là thư viện một bên thứ ba js có thể phục vụ mục đích của bạn

http://processingjs.org/

Answer 3

Sử dụng Canvas HTML5 và AJAX, bạn có thể thực hiện như sau:

window.onload = function(){ 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 
    var centerX = canvas.width/2; 
    var centerY = canvas.height/2; 
    var radius = 10; 

    context.beginPath(); 
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
    context.fillStyle = "black"; 
    context.fill(); 
    context.lineWidth = 1; 
    context.strokeStyle = "black"; 
    context.stroke(); 

};

dòng lớn là:

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 

Để biết thêm đi xem: HTML5 Canvas Tutorials

Answer 4

Đây là một cách đơn giản để làm một vòng tròn cho các trình duyệt hiện đại:

<div style='border: 3px solid red; border-radius: 50px; width: 100px; height: 100px;'> 
</div> 

Demo.

chỉnh sửa — Nó hoạt động tốt hơn với "kích thước hộp" ("hộp-kích thước hộp-moz" cho Firefox) được đặt thành "hộp biên giới".

<style> 
    div.circle { 
    border: 3px solid red; 
    border-radius: 50%; 
    width: 100px; height: 100px; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    } 
</style> 

<div class=circle> 
</div>