Javascript 在HTML5画布中绘制任意形状
我正在尝试使用HTML5画布元素绘制一个图形。图由顶点和连接这些顶点的边组成。我用小圆表示顶点,用连接圆的线表示边 在我的项目中,我希望在按下“下一步”按钮时更改顶点的位置。下图是首次加载页面时画布的状态: 单击“下一步”按钮后,将根据顶点的新坐标重新绘制图形。但是,渲染似乎有错误,如下所示: 奇怪的是,我没有在任何地方使用fill()函数,所以我无法理解为什么会出现填充部分。以下是用于绘制图形的draw()函数的代码:Javascript 在HTML5画布中绘制任意形状,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,我正在尝试使用HTML5画布元素绘制一个图形。图由顶点和连接这些顶点的边组成。我用小圆表示顶点,用连接圆的线表示边 在我的项目中,我希望在按下“下一步”按钮时更改顶点的位置。下图是首次加载页面时画布的状态: 单击“下一步”按钮后,将根据顶点的新坐标重新绘制图形。但是,渲染似乎有错误,如下所示: 奇怪的是,我没有在任何地方使用fill()函数,所以我无法理解为什么会出现填充部分。以下是用于绘制图形的draw()函数的代码: function draw(position) { var c
function draw(position)
{
var canvas_elem = document.getElementById('drawing');
// Check the element is in the DOM and the browser supports canvas
if(canvas_elem.getContext)
{
// Initaliase a 2-dimensional drawing context
var canvas = canvas_elem.getContext('2d');
// Clear canvas
canvas.clearRect(0, 0, canvas_elem.width, canvas_elem.height);
var data = data_array[num_vertices+1+position].split(",");
// Draw all vertices
for( var i=0; i<num_vertices; i++)
{
canvas.arc(data[2*i], data[2*i+1], radius, 0, 2 * Math.PI, false);
canvas.fillStyle = 'black';
canvas.fill();
}
// Connect vertices by lines according to adjacency matrix
for(var i=0;i<num_vertices; i++)
{
for(var j=i; j<num_vertices; j++)
{
if(adjacency[i][j]==1)
{
canvas.beginPath();
canvas.moveTo(data[2*i],data[2*i+1]);
canvas.lineTo(data[2*j],data[2*j+1]);
canvas.stroke();
}
}
}
}
else
{
alert("Please use an HTML5 compatible browser.");
}
}
.arc()
方法将点添加到当前路径,而.fill()
方法将填充当前路径。如果继续调用.arc()
,则使用的是相同的路径,因此最终会被填充。使用.beginPath()
启动新路径:
,
.arc()
不应创建新路径或子路径。Google Chrome中.arc()
的实现不符合规范。在Chrome中,每次调用.arc()
都会创建一个新的子路径。这种行为是不标准的。好吧,一个愚蠢的错误。画完每一行后,我忘记调用closePath()。你能给我们提供数据数组
和顶点数
中的信息吗?检查这把小提琴是否有缺件;嗨…请在我对我的帖子所做的编辑中找到你要求的信息。谢谢你的帮助!对不起,那没用。据我所知,如果使用fill()方法,则不需要显式关闭路径。这是自动完成的。阅读此处:@aakashbowmick-.fill()
执行隐式闭合路径,但实际上不会通过将路径标记为闭合或添加点来修改路径。即使显式调用closePath()
也不够好,因为它只关闭当前子路径。下一次调用arc()
将在从最后一个弧到新弧的路径中添加一条线。您是否仅在Chrome中进行测试?因为,在我在IE和FireFox中进行的测试中,如果不为ARC调用beginPath()
,整个路径将用黑色填充。
data_array=[
"10",
"0,1,1,0,0,0,0,0,0,0",
"1,0,0,1,0,0,0,0,0,1",
"1,0,0,0,1,0,0,0,0,1",
"0,1,0,0,0,1,0,0,1,1",
"0,0,1,0,0,0,1,0,1,1",
"0,0,0,1,0,0,0,1,1,0",
"0,0,0,0,1,0,0,1,1,0",
"0,0,0,0,0,1,1,0,0,0",
"0,0,0,1,1,1,1,0,0,0",
"0,1,1,1,1,0,0,0,0,0",
"10,2,35.4,23.3,88.9,100,210,350,70,500,412,208,336,112,45,32,89,92,102,23",
"30,4,19.4,35.3,80.9,90,230,310,120,440,400,220,330,105,40,29,80,89,90,18"
]
num_vertices=10
// Draw all vertices
for( var i=0; i<num_vertices; i++)
{
canvas.beginPath();
canvas.arc(data[2*i], data[2*i+1], radius, 0, 2 * Math.PI, false);
canvas.fill();
}
// Draw all vertices
for (var i = 0; i < num_vertices; i++) {
var x = data[2 * i];
var y = data[2 * i + 1]
canvas.moveTo(x, y);
canvas.arc(x, y, radius, 0, 2 * Math.PI, false);
}
canvas.fill();