javascript - 在 div 内绘制形状

标签 javascript html dom

是否可以使用 arc() 和 rect() 函数使用 javascript 在 div 内绘制形状?能否请您举一个简单的例子,在 div 中画一个圆圈(用“arc()”绘制)?

编辑:我完全理解 rect 和 arc 函数,但我有点被 javascripts 上下文绊倒了。

我创建了一个名为 appLights 的 div 并将其定位到正确的位置。现在我试图在 div 的顶部中心绘制一个简单的圆圈,但遇到了问题。

appLights = document.createElement("div");
appLights.style.position = "relative";
appLights.style.width = "30px";
appLights.style.height = "180px";
appLights.style.left = "105px";
appLights.style.top = "-175px";

var ctx = appLights.getContext('2d');
ctx.beginPath();
ctx.fillStyle = "rgb(123,123,123)";
ctx.arc(15,15,10,0, Math.PI * 2,true);
ctx.fill();

最佳答案

appLights 必须<canvas>元素。你不能在 <div> 上画画

代码的第一行应如下所示:

appLights = document.createElement("canvas");

另一个问题是您没有将这个新元素放在页面上的任何位置,因此在您将其附加到 <body> 中的某处之前,任何绘图都不会显示。

关于javascript - 在 div 内绘制形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17842900/

相关文章:

jQuery 更改所有 <element> HTML 如果 HTML = Something

javascript - JQuery 将一段代码应用于多个元素

python - 在电子邮件中使用 HTML 并排发送两个 Pandas 数据帧

javascript - 使用 not in querySelector with spaces

javascript - 更改 DIV 的innerHTML 会更改表属性

javascript - 如何在 Javascript 中创建对象 "live"而无需将其绑定(bind)到 DOM

javascript - WordPress 和 jquery

javascript getFullYear() 返回五位数字

javascript - $.getJSON 函数与 json 对象

javascript - 动态更改语言时,是否应该更新 HTML lang 属性?