我的代码在画布中的错误位置绘制图像
我需要你的帮助，我的代码遇到了问题，在这里我试图从每个扇区绘制一个带有线条的数据图表，在行尾我正在绘制图标，但遗憾的是图像未绘制在正确的地方，这是我的代码，我需要你的帮助。
<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>
这是结果，但这不是我想要的，我需要在其行的末尾绘制每个图标
2 个答案:
答案 0 :(得分：1)
这是你需要的吗？ 刚刚纠正了你脚本上的一些东西......几个不必要的空白......
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);
答案 1 :(得分：0)
问题在于this.drawImg(x_axis +X , y_axis + Y , icons[i] );
第一个if中的那个如果好的话，其他三个不是。
-
this.drawImg(x_axis+190 , y_axis-90 , icons[i] ); -
this.drawImg(x_axis+190 , y_axis+90 , icons[i] ); -
this.drawImg(x_axis-190 , y_axis+90 , icons[i] ); -
this.drawImg(x_axis-190 , y_axis-90 , icons[i] ); - 按
-heightIcon / 2垂直移动
- 对于图表左侧的图标，请按
-widthIcon水平移动
不要忘记添加与图像大小相对应的移位。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？