我需要你的帮助，我的代码遇到问题，在这里我试图绘制一个圆图，其中包含每个扇区的线条，在线条的末尾我绘制图标，但不幸的是图像没有绘制在正确的位置，所以这是我的代码，我需要你的帮助。
<body>
<canvas id="chart" width=1000 height=900 style="background-color:#6d6363"> </canvas>
<script type="text/javascript">
var canvas = document.getElementById("chart");
var chart = canvas.getContext("2d");
function drawdountChart(canvas)
{
this.x , this.y , this.radius , this.lineWidth , this.strockStyle , this.from , this.to = null;
this.set = function( x, y, radius, from, to, lineWidth, strockStyle)
{
this.x = x;
this.y = y;
this.radius = radius;
this.from=from;
this.to= to;
this.lineWidth = lineWidth;
this.strockStyle = strockStyle;
}
this.drawImg = function(x , y , imagePath) // this is the function where I draw my image
{
var image = document.createElement("img");
image.src=imagePath;
image.onload=(function()
{
canvas.drawImage(image , x , y);
});
}
this.draw = function(data)
{
canvas.beginPath();
canvas.lineWidth = this.lineWidth;
canvas.strokeStyle = this.strockStyle;
canvas.arc(this.x , this.y , this.radius , this.from , this.to);
canvas.stroke();
var numberOfParts = data.numberOfParts;
var parts = data.parts;
var colors = data.colors;
var icons = data.icons;
var artPercentage = null;
var beginFrom = 0;
var currentX = null;
var currentY = null;
for(var i = 0; i<numberOfParts; i++)
{
percentage= parts[i]/this.radius;
canvas.beginPath();
canvas.lineWidth=30;
canvas.strokeStyle = colors[i];
canvas.arc(this.x , this.y ,this.radius , beginFrom , (Math.PI*2*percentage)+beginFrom , false);
var x_axis = (this.radius*Math.cos(beginFrom))+this.x;
var y_axis = (this.radius*Math.sin(beginFrom))+this.y;
var angleInDegree = beginFrom*57.3;
beginFrom = (Math.PI*2*percentage)+beginFrom;
canvas.stroke();
canvas.beginPath();
canvas.lineWidth = 1;
if(angleInDegree>=270&&angleInDegree<360)
{
canvas.moveTo(x_axis , y_axis);
canvas.lineTo(x_axis+150 , y_axis-90);
canvas.stroke();
canvas.beginPath();
canvas.moveTo(x_axis+150 , y_axis-90);
canvas.lineTo(x_axis+190 , y_axis-90);
canvas.stroke();
this.drawImg(x_axis+190 , y_axis-90 , icons[i] ); //calling for my drawImg function where I send the points where the line ends as a parameters and the path of the image to be drawn
}else
if(angleInDegree>=0&&angleInDegree<90)
{
canvas.moveTo(x_axis , y_axis);
canvas.lineTo(x_axis+150 , y_axis+90);
canvas.stroke();
canvas.beginPath();
canvas.moveTo(x_axis+150 , y_axis+90);
canvas.lineTo(x_axis+190 , y_axis+90);
canvas.stroke();
this.drawImg(x_axis+190 , y_axis-90 , icons[i] );//calling for my drawImg function where I send the points where the line ends as a parameters and the path of the image to be drawn
}else
if(angleInDegree>=90&&angleInDegree<180)
{
canvas.moveTo(x_axis , y_axis);
canvas.lineTo(x_axis-150 , y_axis+90);
canvas.stroke();
canvas.beginPath();
canvas.moveTo(x_axis-150 , y_axis+90);
canvas.lineTo(x_axis-190 , y_axis+90);
canvas.stroke();
this.drawImg(x_axis-190 , y_axis-90 , icons[i] );//calling for my drawImg function where I send the points where the line ends as a parameters and the path of the image to be drawn
}else
if(angleInDegree>=180&&angleInDegree<270)
{
canvas.moveTo(x_axis , y_axis);
canvas.lineTo(x_axis-150 , y_axis-90);
canvas.stroke();
canvas.beginPath();
canvas.moveTo(x_axis-150 , y_axis-90);
canvas.lineTo(x_axis-190 , y_axis-90);
canvas.stroke();
this.drawImg(x_axis-190 , y_axis-90 , icons[i] );//calling for my drawImg function where I send the points where the line ends as a parameters and the path of the image to be drawn
}
}
}
}
var data =
{
numberOfParts: 5,
parts:[20, 20,65, 25 , 10],
colors:["red", "green", "blue", "yellow" , "orange" ],
comments:["comment1", "comment2", "comment3", "comment4" ],
icons:["images/fb.png", "images/fB.png", "images/fb.png", "images/fb.png", "images/fb.png"]
};
var drawDount = new drawdountChart(chart);
drawDount.set(400, 400, 140, 0, Math.PI*2, 30, "#FFF");
drawDount.draw(data);
</script>
</body>
这就是结果，但这不是我想要的，我需要将每个图标绘制在其行尾
最佳答案
这是你需要的吗？ 只是更正了脚本中的一些内容...一些不必要的空格...
http://jsfiddle.net/vitorboccio/p4LxZ/
var canvas = document.getElementById("chart");
var chart = canvas.getContext("2d");
function drawdountChart(canvas)
{
this.x, this.y, this.radius, this.lineWidth, this.strockStyle, this.from, this.to = null;
this.set = function( x, y, radius, from, to, lineWidth, strockStyle)
{
this.x = x;
this.y = y;
this.radius = radius;
this.from=from;
this.to= to;
this.lineWidth = lineWidth;
this.strockStyle = strockStyle;
};
this.drawImg = function(x , y , imagePath) // this is the function where I draw my image
{
var image = document.createElement("img");
image.src=imagePath;
image.onload=(function()
{
canvas.drawImage(image , x , y);
});
};
this.draw = function(data)
{
canvas.beginPath();
canvas.lineWidth = this.lineWidth;
canvas.strokeStyle = this.strockStyle;
canvas.arc(this.x , this.y , this.radius , this.from , this.to);
canvas.stroke();
var numberOfParts = data.numberOfParts;
var parts = data.parts;
var colors = data.colors;
var icons = data.icons;
var artPercentage = null;
var beginFrom = 0;
var currentX = null;
var currentY = null;
for(var i = 0; i<numberOfParts; i++)
{
percentage= parts[i]/this.radius;
canvas.beginPath();
canvas.lineWidth=30;
canvas.strokeStyle = colors[i];
canvas.arc(this.x , this.y ,this.radius , beginFrom , (Math.PI*2*percentage)+beginFrom , false);
var x_axis = (this.radius*Math.cos(beginFrom))+this.x;
var y_axis = (this.radius*Math.sin(beginFrom))+this.y;
var angleInDegree = beginFrom*57.3;
beginFrom = (Math.PI*2*percentage)+beginFrom;
canvas.stroke();
canvas.beginPath();
canvas.lineWidth = 1;
if(angleInDegree>=270&&angleInDegree<360)
{
canvas.moveTo(x_axis , y_axis);
canvas.lineTo(x_axis+150 , y_axis-90);
canvas.stroke();
canvas.beginPath();
canvas.moveTo(x_axis+150 , y_axis-90);
canvas.lineTo(x_axis+190 , y_axis-90);
canvas.stroke();
this.drawImg(x_axis+190 , y_axis-90 , icons[i] ); //calling for my drawImg function where I send the points where the line ends as a parameters and the path of the image to be drawn
}else
if(angleInDegree>=0&&angleInDegree<90)
{
canvas.moveTo(x_axis , y_axis);
canvas.lineTo(x_axis+150 , y_axis+90);
canvas.stroke();
canvas.beginPath();
canvas.moveTo(x_axis+150 , y_axis+90);
canvas.lineTo(x_axis+190 , y_axis+90);
canvas.stroke();
this.drawImg(x_axis+190 , y_axis-90 , icons[i] );//calling for my drawImg function where I send the points where the line ends as a parameters and the path of the image to be drawn
}else
if(angleInDegree>=90&&angleInDegree<180)
{
canvas.moveTo(x_axis , y_axis);
canvas.lineTo(x_axis-150 , y_axis+90);
canvas.stroke();
canvas.beginPath();
canvas.moveTo(x_axis-150 , y_axis+90);
canvas.lineTo(x_axis-190 , y_axis+90);
canvas.stroke();
this.drawImg(x_axis-190 , y_axis-90 , icons[i] );//calling for my drawImg function where I send the points where the line ends as a parameters and the path of the image to be drawn
}else
if(angleInDegree>=180&&angleInDegree<270)
{
canvas.moveTo(x_axis , y_axis);
canvas.lineTo(x_axis-150 , y_axis-90);
canvas.stroke();
canvas.beginPath();
canvas.moveTo(x_axis-150 , y_axis-90);
canvas.lineTo(x_axis-190 , y_axis-90);
canvas.stroke();
this.drawImg(x_axis-190 , y_axis-90 , icons[i] );//calling for my drawImg function where I send the points where the line ends as a parameters and the path of the image to be drawn
}
}
};
}
var data =
{
numberOfParts: 5,
parts:[20, 20,65, 25 , 10],
colors:["red", "green", "blue", "yellow" , "orange" ],
comments:["comment1", "comment2", "comment3", "comment4" ],
icons:["images/fb.png", "images/fB.png", "images/fb.png", "images/fb.png", "images/fb.png"]
};
var drawDount = new drawdountChart(chart);
drawDount.set(400, 400, 140, 0, Math.PI*2, 30, "#FFF");
drawDount.draw(data);
关于javascript - 我的代码在 Canvas 中的错误位置绘制图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23704824/