Javascript 我的代码在画布中的错误位置绘制图像
我需要你的帮助，我的代码遇到了一个问题，在这里，我试图绘制一个从每个扇区引出的线的dount图表，在线的末尾我绘制图标，但不幸的是，图像没有绘制在正确的位置，所以这是我的代码，我需要你的帮助Javascript 我的代码在画布中的错误位置绘制图像,javascript,html,canvas,Javascript,Html,Canvas,我需要你的帮助，我的代码遇到了一个问题，在这里，我试图绘制一个从每个扇区引出的线的dount图表，在线的末尾我绘制图标，但不幸的是，图像没有绘制在正确的位置，所以这是我的代码，我需要你的帮助 <body> <canvas id="chart" width=1000 height=900 style="background-color:#6d6363"> </canvas> <script type="text/javascript"&
<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>
var canvas=document.getElementById（“图表”）；
var chart=canvas.getContext（“2d”）；
函数drawdountChart（画布）
{
this.x，this.y，this.radius，this.lineWidth，this.strockStyle，this.from，this.to=null；
this.set=函数（x、y、半径、从、到、线宽、strockStyle）
{
这个.x=x；
这个。y=y；
这个半径=半径；
this.from=from；
这个。to=to；
this.lineWidth=线宽；
this.strockStyle=strockStyle；
}
this.drawImg=函数（x，y，imagePath）//这是我绘制图像的函数
{
var image=document.createElement（“img”）；
src=imagePath；
image.onload=（函数（）
{
画布.绘图图像（图像，x，y）；
});
}
this.draw=函数（数据）
{
canvas.beginPath（）；
canvas.lineWidth=此.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 beginfom=0；
var currentX=null；
var currentY=null；
对于（变量i=0；i=270&&angleInDegree=0&&angleInDegree=90&&angleInDegree=180&&angleInDegree这是您需要的吗？
只是更正了脚本上的一些内容…一些不必要的空白
var canvas=document.getElementById（“图表”）；
var chart=canvas.getContext（“2d”）；
函数drawdountChart（画布）
{
this.x，this.y，this.radius，this.lineWidth，this.strockStyle，this.from，this.to=null；
this.set=函数（x、y、半径、从、到、线宽、strockStyle）
{
这个.x=x；
这个。y=y；
这个半径=半径；
this.from=from；
这个。to=to；
this.lineWidth=线宽；
this.strockStyle=strockStyle；
};
this.drawImg=函数（x，y，imagePath）//这是我绘制图像的函数
{
var image=document.createElement（“img”）；
src=imagePath；
image.onload=（函数（）
{
画布.绘图图像（图像，x，y）；
});
};
this.draw=函数（数据）
{
canvas.beginPath（）；
canvas.lineWidth=此.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 beginfom=0；
var currentX=null；
var currentY=null；
对于（变量i=0；i=270&&angleInDegree=0&&angleInDegree=90&&angleInDegree=180&&angleInDegree，问题在于
第一个if
中的一个如果可以，其他三个就不行
this.drawing（x_轴+190，y_轴-90，图标[i]）；
this.drawing（x_轴+190，y_轴+90，图标[i]）；
this.drawing（x_轴-190，y_轴+90，图标[i]）；
this.drawing（x_轴-190，y_轴-90，图标[i]）；
垂直移动<代码>-高度图标/2
对于图表左侧的图标，水平移动-widthIcon
你能保存生成的画布并上传吗？然后在你的问题中添加图像，这会有很大帮助。@agrum我将它添加到question@markE你能帮帮我吗？谢谢，我想是用我钉好的图像。哦，非常感谢你，我没有注意到我在复制和粘贴同一行时没有更改所有值阿格拉姆酒店
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);