Circle To Line Join via HTML5 Canvas
i am trying to join each circle via line and my final code does it but it has some aligment problems like that:
I marked some joining parts with red circle. They are not properly aligned(line doesn't out from center of circle) as you see.
<!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"]);
开发者_如何学Go 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>
All files: http://www.2shared.com/file/Uyh2J0Ni/canvas.html
Here is a major simplification of your code that should point out what the problem is. I made the fill light blue and the stroke width smaller so you can see the issue. I am just calling your function twice:
drawCircleAndLine(100,100);
drawCircleAndLine(100,200);
You would expect a straight downward line, but clearly it is not going straight! See here:
http://jsfiddle.net/24khs/
What is going on is this:
The first time, just a circle is being drawn with a center at 100,100. This is good
The second time, a circle is being drawn at 200,200, and then then end of the path at that point is the rightmost part of the circle (which is about 106,200). You are then drawing a line from (106,200) to (100,100).
In order to fix this, you can add one command, a moveTo(x, y) before your lineTo so that you start the line from the right place. See here:
http://jsfiddle.net/6VfvG/
加载中,请稍侯......
精彩评论