畫布HTML5和創建多個圓

下帆布的W3C學校的解釋，我瞭解創建形狀......畫布HTML5和創建多個圓

<script> 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 
    var centerX = canvas.width/2; 
    var centerY = canvas.height/2; 
    var radius = 20; 

    context.beginPath(); 
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
    context.fillStyle = 'green'; 
    context.fill(); 
    context.lineWidth = 5; 
    context.strokeStyle = '#003300'; 
    context.stroke(); 
</script>

這將使綠色圓圈在我的畫布。

<canvas id="myCanvas"></canvas>

但是，我想將「circle」應用於頁面上的多個位置，並且通過ID執行此操作將會很荒謬。

如何將上下文（如上定義）應用於多個畫布？我'假設使用類，這似乎是合乎邏輯的方式。

<canvas class="redDot"></canvas> 
<canvas class="redDot"></canvas> 
<canvas class="redDot"></canvas> 

<canvas class="greenDot"></canvas> 
<canvas class="greenDot"></canvas> 

<canvas class="blueDot"></canvas> 
<canvas class="blueDot"></canvas> 
<canvas class="blueDot"></canvas>

來源

2013-04-18 jpmyob

您將不得不遍歷每個元素以應用更改。即：

var dots = document.getElementsByClassName('dots'); 
for (var i=0;i<dots.length;i++){ 
    var canvas = dots[i]; 
    var context = canvas.getContext('2d'); 
    // Draw circles here 
}

理想情況下，你只會有你可以繪製多個圓

var canvas = document.getElementById('myOneAndOnlyCanvas'); 
// Using CSS and layering can make background 
var context = canvas.getContext('2d'); 

dot('red',50,50); 
dot('blue',100,50); 
//etc.. 

function dot(color,x,y){ 
    context.beginPath(); 
    context.arc(y, y, radius, 0, 2 * Math.PI, false); 
    context.fillStyle = color; 
    context.fill(); 
    context.lineWidth = 5; 
    context.strokeStyle = '#003300'; 
    context.stroke(); 
}

一個canvas元素但是，如果不適合你的使用情況有關使用SVG對象是什麼？

既然你提到W3學校：http://www.w3schools.com/svg/ 但最好檢查：http://www.w3.org/Graphics/SVG/

心靈，大教堂重型頁面可以嚴重傷害的加載時間。取決於你想要做什麼，使用圖像可能更明智（例如，大量的點）。

來源

2013-04-18 16:25:11

不應該將上下文也作爲參數傳遞嗎？每個canvas元素只有一個上下文，在這個函數中，我認爲你總是調用相同的canvas上下文 – pollirrata

在第二個片段中？這纔是重點。只使用一個畫布。 –

@Dylan，我想關於DOM的觀點很重要，我假設渲染顏色比調用圖像少一個資源。 - 如果我只是做舊的「圖像」解決方案，它會證明我的代碼更簡單 – jpmyob

畫布HTML5和創建多個圓

回答

相關問題