在div中绘制图形

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

编辑：我完全理解矩形和弧函数，但我有点绊倒了JavaScript的上下文。

我创建了一个名为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();

来源

2013-07-24 Carter

地方附加它是你可以...谷歌用帆布 –

的JavaScript绘制你得至少投入的精力smaaaaaaaaall量:) – null

我就不会在这里张贴如果我能得到它的工作。 – Carter

appLightsMUST是<canvas>元件。你不能在你的代码<div>

第一行画应该是以下几点：

appLights = document.createElement("canvas");

的另一个问题是，你不把这个新元素网页的任意位置上，因此任何图纸不会显示，直到您在<body>

来源

2013-07-24 20:37:54 Jnatalzia

画布使圆圈出现，但它被水平压扁。它不是一个半径为10px的圆，而是一条垂直的20px线。我也有画布附加。 – Carter

这是因为你设计canvas元素的方式。画布有它自己的方法来改变宽度和高度。通过CSS将图画倾斜到画布。 [见这里]（http://stackoverflow.com/questions/4938346/canvas-width-and-height-in-html5） – Jnatalzia

谢谢你这一切修复它 – Carter

在div中绘制图形

回答

相关问题