원에 숫자를 추가하는 방법

jsFiddle을 사용하여 미리 정의 된 위치로 원을 만들었습니다. 이 원에 숫자를 추가하여 각 원에 숫자를 추가하려면 어떻게합니까?원에 숫자를 추가하는 방법

function draw_circle(center_x, center_y){ 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 
    var centerX = center_x; 
    var centerY = center_y; 
    var radius = 30 
    ; 

    context.beginPath(); 
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
    context.fillStyle = 'lightblue'; 
    context.fill(); 
    context.lineWidth =3; 
    context.strokeStyle = '#003300'; 
    context.stroke(); 
    }

출처

2016-10-14 N.zay

당신은 우리가 먼저 우리 자신의 재생을 만들 필요없이 행동 및 편집/업데이트의 코드를 볼 수 있도록 문제는 그것이, 그 링크를 추가 할 가치가있을 수도 있습니다 보여줍니다 JS 바이올린을 만든 경우. 마찰을 최소화하면 응답 속도가 빨라집니다. :) –

jsfiddle code

은 내가 textnode 바로 원 이후 추가됩니다 원

번호를하는 방법을 보여주는 샘플의 단순화 된 버전을했다. 원의 불투명도는 0.5로 설정되고, 그렇지 않으면 텍스트가 원으로 덮여집니다.

<!DOCTYPE html> 
<head> 
    <meta charset="UTF-8"> 
    <script type = "text/javascript" 
     src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script> 
    <style> 
    svg .circle { 
     stroke: yellow; 
     opacity: 0.5; 
     stroke-width: 2; 
    } 
    </style> 
</head> 
<body> 
<script type="text/javascript"> 
$(document).ready(function() { 
    var width = 900, height = 650; 
    var radius = 30; 
    var numCircles = 10; 
    var circles=[[133,396],[234,511.0000305175781],[369,116],[348,388],[231,278],[351,232],[520,228],[116,199],[522,425],[229,120]]; 
    var svg = d3.select("body").append("svg").attr("width", width).attr("height", height).attr("id", 'svg'); 
    var g_circles = svg.append("g").attr("class", "circles"); 
    $.each(circles, function(i, d) { 
     g_circles.append("circle").attr("class", "circle").attr("id", "circle" + i).attr("r", radius).attr("cx", d[0]).attr("cy", d[1]); 
     g_circles.append("text").attr("x", d[0]-5).attr("y", d[1]+5).text(i); 
    }); 
}); 
     </script> 
</body></html>

출처

2016-10-14 23:22:25 peter

은 무작위로 생성되는 숫자입니까? 일부 서클에 문자를 추가하고 다른 서클에 문자를 추가 할 수 있습니까? –

아니요, 그들은 .text (i)로 표시됩니다.이 배열은 서클 배열을 만드는 순서이지만, i 대신 원하는 모든 것을 넣을 수 있습니다 – peter

원에 숫자를 추가하는 방법

답변

관련 문제