Я пытаюсь присоединиться к каждому кругу через строку, и мой окончательный код делает это, но у него есть некоторые проблемы с привязкой, такие как:
Я пометил некоторые соединяющиеся части красным кружком,Они не выровнены должным образом (линия не выходит из центра круга), как вы видите.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<canvas id="graph" width="982" height="636" style="width:491px">
Tarayıcınız Canvas Desteklemiyor !
</canvas>
<script type="text/javascript">
var i = 0;
var lastCoord = new Array();
var c=document.getElementById("graph");
var cxt=c.getContext("2d");
function getParam(name)
{
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if(results == null)
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
function drawCircleAndLine(x, y)
{
cxt.fillStyle="#000000";
cxt.beginPath();
if(i == 0) cxt.arc(x, y, 9, 0, Math.PI*2, false);
else cxt.arc(x, y, 6, 0, Math.PI*2, false);
cxt.closePath();
cxt.fill();
if(i % 4 != 0)
{
cxt.lineWidth = 8;
cxt.lineTo(lastCoord[0], lastCoord[1]);
cxt.stroke();
}
else {
cxt.moveTo(lastCoord[0], lastCoord[1]);
cxt.lineTo(lastCoord[0], lastCoord[1]);
cxt.stroke();
}
lastCoord = [x, y];
i++;
}
var coords = {
0 : {
0 : {
"0" : { "x" : 50, "y" : 580},
"1" : { "x" : 50, "y" : 540},
"2" : { "x" : 50, "y" : 472},
"3" : { "x" : 50, "y" : 430},
"4" : { "x" : 50, "y" : 400},
"5" : { "x" : 50, "y" : 382},
"6" : { "x" : 50, "y" : 340},
"7" : { "x" : 50, "y" : 300},
"8" : { "x" : 50, "y" : 250},
"9" : { "x" : 50, "y" : 205},
"10" : { "x" : 50, "y" : 160},
"12" : { "x" : 50, "y" : 138},
"14" : { "x" : 50, "y" : 110},
"15" : { "x" : 50, "y" : 85},
"16" : { "x" : 50, "y" : 65},
"20" : { "x" : 50, "y" : 40}
},
1 : {
"0" : { "x" : 98, "y" : 555},
"1" : { "x" : 98, "y" : 493},
"2" : { "x" : 98, "y" : 451},
..............
"-4" : { "x" : 926, "y" : 356},
"-5" : { "x" : 926, "y" : 375},
"-6" : { "x" : 926, "y" : 398},
"-7" : { "x" : 926, "y" : 428},
"-8" : { "x" : 926, "y" : 452},
"-9" : { "x" : 926, "y" : 476},
"-10" : { "x" : 926, "y" : 500},
"-11" : { "x" : 926, "y" : 530},
"-12" : { "x" : 926, "y" : 550},
"-16" : { "x" : 926, "y" : 588}
}
}
};
var bg = new Image();
bg.src = "images/disc_graph_empty.jpg";
bg.onload = function() {
cxt.drawImage(bg, 0, 0);
try
{
drawCircleAndLine(coords[0][0][getParam('d1')]["x"], coords[0][0][getParam('d1')]["y"]);
drawCircleAndLine(coords[0][2][getParam('d2')]["x"], coords[0][3][getParam('d2')]["y"]);
drawCircleAndLine(coords[0][2][getParam('d3')]["x"], coords[0][2][getParam('d3')]["y"]);
drawCircleAndLine(coords[0][3][getParam('d4')]["x"], coords[0][3][getParam('d4')]["y"]);
drawCircleAndLine(coords[1][0][getParam('d5')]["x"], coords[1][0][getParam('d5')]["y"]);
drawCircleAndLine(coords[1][4][getParam('d6')]["x"], coords[1][5][getParam('d6')]["y"]);
drawCircleAndLine(coords[1][2][getParam('d7')]["x"], coords[1][2][getParam('d7')]["y"]);
drawCircleAndLine(coords[1][3][getParam('d8')]["x"], coords[1][3][getParam('d8')]["y"]);
drawCircleAndLine(coords[2][0][getParam('d9')]["x"], coords[2][0][getParam('d9')]["y"]);
drawCircleAndLine(coords[2][6][getParam('d10')]["x"], coords[2][7][getParam('d10')]["y"]);
drawCircleAndLine(coords[2][2][getParam('d11')]["x"], coords[2][2][getParam('d11')]["y"]);
drawCircleAndLine(coords[2][3][getParam('d12')]["x"], coords[2][3][getParam('d12')]["y"]);
}
catch(err)
{
alert('Hata Oluştu !\nBazı noktalar yerleşmemiş olabilir.\n\n\n' + err);
}
}
</script>
</body>
</html>
Все файлы: http://www.2shared.com/file/Uyh2J0Ni/canvas.html