Question

是否可以使用arc（）和rect（）函数使用javascript在div中绘制形状？你能举个简单的例子说明一个圆圈（用'arc（）'绘制）在div里面吗？

编辑：我完全理解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();

Answer 1

appLights 必须是<canvas>元素。您无法使用<div>

进行绘制

代码中的第一行应如下所示：

appLights = document.createElement("canvas");

另一个问题是你没有把这个新元素放在页面的任何地方，所以任何绘图都不会显示，直到你在<body>

中的某处附加它

在div中绘制形状

1 个答案: