代码之家 › 专栏 › 技术社区 › will

javascript画布绘制问题

canvas html5 javascript

will · 技术社区 · 14 年前

所以我有一组javascript来创建一些随机点,然后通过最小生成树连接它们。一切正常。

然后,它将点和路径绘制到画布上;然后它绘制这样的图像:

-每次随机生成。

我有一个问题,我想让每个圆都是一个带黄色轮廓的黑色圆。这些圆是这样画的:

context.fillstyle=“ffff00”;
对于(var i=0;i<syscount;i++){
context.moveto(systemsx[i],systemsy[i]);
context.arc(systemsx[i],systemsy[i],4,0,math.pi*2,真);
}
上下文(FILL);
< /代码> 

这很好,但是我想画一个黑色的圆圈,并且有一个黄色的痕迹。我想这样做,因为这样做比停止连接点的线要容易得多,比它们通常要早停止几个像素。


这是我的尝试:

context.fillstyle=“000000”;
对于(var i=0;i<syscount;i++){
context.moveto(systemsx[i],systemsy[i]);
context.arc(systemsx[i],systemsy[i],ssize,0,math.pi*2,真);
}
上下文(FILL);

context.strokestyle=“ffff00”;
对于(var i=0;i<syscount;i++){
context.moveto(systemsx[i]+ssize,systemsy[i]);
context.arc(systemsx[i],systemsy[i],ssize,0,math.pi*2,真);
}
context.stroke();
< /代码> 

但它画出:



?!!!它在另一条路径上重新绘制。为什么?

页面的zip:http://rapidshare.com/files/415710231/page.zip(html文件和zip中的css文件)。绘制圆的代码段从第164行开始。

然后,它将点和路径绘制到画布上;然后它绘制这样的图像:



-每次随机生成。

我有一个问题,我想让每个圆都是一个带黄色轮廓的黑色圆。圆的绘制方式如下:

context.fillStyle = "#ffff00";
for(var i = 0; i < syscount; i++){
    context.moveTo(systemsX[i],systemsY[i]);
    context.arc(systemsX[i],systemsY[i],4,0,Math.PI*2,true);
}
context.fill();


这很好,但是我想画一个黑色的圆圈,并且有一个黄色的痕迹。我想这样做,因为这样做比停止连接点的线要容易得多,比正常情况下要早几个像素。

这是我的尝试:

context.fillStyle = "#000000";
for(var i = 0; i < syscount; i++){
    context.moveTo(systemsX[i],systemsY[i]);
    context.arc(systemsX[i],systemsY[i],ssize,0,Math.PI*2,true);
}
context.fill();

context.strokeStyle = "#ffff00";
for(var i = 0; i < syscount; i++){
    context.moveTo(systemsX[i]+ssize,systemsY[i]);
    context.arc(systemsX[i],systemsY[i],ssize,0,Math.PI*2,true);
}
context.stroke();


但它得出了以下结论:



?!!!它在另一条路径上重新绘制。为什么?!

页面的邮政编码:http://rapidshare.com/files/415710231/page.zip(HTML文件和压缩文件中的CSS文件)。绘制圆的代码段从第164行开始。

1 回复 | 直到 14 年前

Matthew Crumley 14 年前

你需要打电话 context.beginPath() 在绘制每个部分以清除路径之前。 stroke() 和 fill() 将路径保留在适当的位置,以便在每一步重新绘制行。

您还可以利用周围的路径,并为填充的黑色圆圈和轮廓重用该路径。它避免了代码重复,应该稍微快一点。代码如下:

// Clear out the existing path and start a new one
context.beginPath();

// Add the circles to the newly-created path
for(var i = 0; i < syscount; i++){
    context.moveTo(systemsX[i]+ssize,systemsY[i]);
    context.arc(systemsX[i],systemsY[i],ssize,0,Math.PI*2,true);
}

// Fill them in with black
context.fillStyle = "#000000";
context.fill();

// Draw the outline with yellow
context.strokeStyle = "#ffff00";
context.stroke();