在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中繪製圖形

回答

相關問題