是否可以使用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>中的某个位置。

10-06 15:19