javascript - HTML5 在javascript中的两个div/点之间绘制圆弧

标签 javascript html

我想在页面上画一条弧线,从一个 div 的一个 Angular 到另一个 div 的 Angular ,以表明它们以某种方式连接。页面上发生了很多事情,但我能够得到两个点来绘制。因此,一旦我有了这两个坐标,我将使用什么来以不会干扰周围文本/div/等的方式绘制弧线。只是一切的弧线上方。

最佳答案

您可以使用带有 JavaScript 的 Canvas 。您可以通过调用将 Canvas 的两个 Angular 用圆弧连接起来。

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

只要你的 Canvas 位置正确。您可以使用 offsetLeftoffsetTop.style.pixelHeight.style.pixelWidth 找出 div 的 Angular 在哪里code>,然后对 Canvas 使用绝对定位。

关于javascript - HTML5 在javascript中的两个div/点之间绘制圆弧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49215154/

相关文章:

jquery - 过渡,以寄存器形式变换

javascript - 声明对象文字时出现意外的标识符错误

javascript - 防止 AngularJS $http promise 返回缓存的 JSON 数据

javascript - 历史记录恢复后,Knockout 绑定(bind)将解除绑定(bind)

php - 允许管理员成为其他用户的最简单/最安全的方法是什么

php - 使用 PHP 文件扩展名编写动态 CSS 样式表是否效率较低?

html - 标题两侧的线条

javascript - 如何减少 Amcharts 中的悬停线宽度

javascript - 通过比较两个键来连接两个 json 数组

javascript - 在 jQuery 中匹配两个单独的第 n 个类型?