холста в HTML5 и создании нескольких кругов

Question

после w3c школы объяснения холста, я понимаю создание формы ...

<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> 

Однако - я хочу, чтобы применить этот «круг» в нескольких местах на странице, и делать это по 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> 

Answer 1

Вам нужно будет пройти через каждый элемент, чтобы применить изменения. То есть:

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(); 
} 

Но если это не подходит к вашей пользы дела, что об использовании объекта SVG?

Поскольку вы упомянули w3 школы: http://www.w3schools.com/svg/ Но в идеале проверить: http://www.w3.org/Graphics/SVG/

Ум, Дом Тяжелые страницы могут серьезно повредить время загрузки. В зависимости от того, что вы хотите сделать, может быть разумнее использовать изображение (например, большой кластер точек).