HTML5在javascript中的两个div / points之间绘制一条弧

时间:2018-03-10 23:39:11

标签: javascript html5

我想在我的页面上绘制一个弧形,从一个div的一个角落到另一个div的角落,以显示它们以某种方式连接。页面上有很多内容,但是我可以从中获取两个点。所以,一旦我有了这两个坐标,我会用什么方式来绘制弧线,而这种方式不会干扰周围的文本/ div /等。只是弧线超越一切。

1 个答案:

答案 0 :(得分:1)

您可以使用带有javascript的画布。您可以通过调用将画布的两个角与弧连接起来。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(0,0,c.width,c.height,0.31416*Math.PI);
ctx.stroke();

https://www.w3schools.com/tags/canvas_arc.asp

只要您的画布正确定位即可。你可以弄清楚div的位置'角落位于offsetLeftoffsetTop.style.pixelHeight.style.pixelWidth,然后使用绝对定位为您的画布。