Réduire le balisage JavaScript lors du dessin d'objets en HTML5

J'essaye de dessiner quelques cercles qui auront tous les mêmes propriétés, mais un endingAngle différent, je ne veux pas écrire le code du cercle entier 5 fois, y a-t-il un façon d'attribuer la plus grande partie du code à une classe, et de simplement changer une variable pour 5 ID différents?Réduire le balisage JavaScript lors du dessin d'objets en HTML5

Voici deux des cercles

var canvas = document.getElementById('firefox'); 
var context = canvas.getContext('2d'); 
context.beginPath(); 
context.arc(64, 64, 60, 1.5*Math.PI, .3*Math.PI, true); 
context.lineWidth = 8; 
context.lineCap = "round"; 
context.strokeStyle = '#c5731e'; 
context.stroke(); 

var canvas = document.getElementById('chrome'); 
var context = canvas.getContext('2d'); 
context.beginPath(); 
context.arc(64, 64, 60, 1.5*Math.PI, .9*Math.PI, true); 
context.lineWidth = 8; 
context.lineCap = "round"; 
context.strokeStyle = '#c5731e'; 
context.stroke();

.3 * Math.PI. et * .9 Math.PI. sont les seules choses qui vont changer entre les cercles, de quelque façon que je peux écrire ce qui précède donc Je n'ai pas besoin d'écrire tout ça 5 fois?

Source

2013-08-10 Justin Seals

Vous ne devez pas changer votre balisage, vous pouvez le faire:

['firefox','chrome'].forEach(function(id, index){ 
    var canvas = document.getElementById(id); 
    var context = canvas.getContext('2d'); 
    context.beginPath(); 
    context.arc(64, 64, 60, 1.5*Math.PI, (index+1)*0.3*Math.PI, true); 
    context.lineWidth = 8; 
    context.lineCap = "round"; 
    context.strokeStyle = '#c5731e'; 
    context.stroke(); 
});

Vous ne devez pas dupliquer le code ou d'appeler une fonction, il vous suffit d'ajouter des éléments dans le tableau .

Si vous ne pouvez pas déduire l'angle de l'indice, puis,

soit vous voulez « hardcode » les données, utilisez alors une fonction (voir autre réponse)
ou vous voulez gérer les données en tant que données

Dans ce dernier cas, vous pouvez faire quelque chose comme ceci:

var data = [ 
    {id:'firefox', angle:33}, 
    {id:'chrome', angle:43} 
]; 
data.forEach(function(e){ 
    var canvas = document.getElementById(e.id); 
    var context = canvas.getContext('2d'); 
    context.beginPath(); 
    context.arc(64, 64, 60, 1.5*Math.PI, e.angle, true); 
    context.lineWidth = 8; 
    context.lineCap = "round"; 
    context.strokeStyle = '#c5731e'; 
    context.stroke(); 
});

Source

2013-08-10 12:11:54

Pardonnez-moi probablement pour être vraiment stupide, je n'ai jamais utilisé des tableaux, si j'ai 5 cercles, chacun avec un angle de fin unique qui n'est pas une formule, comment J'écris cela dans la ligne context.arc? –

Vous voulez dire que vous ne pouvez pas déduire les angles de l'index? Si oui, utilisez une fonction (voir la réponse d'Ashwin). –

Je ne suis pas sûr de ce que l'index est, et je ne suis pas sûr comment écrire les 5 angles de fin différents de votre exemple ci-dessus - désolé –

Créer une fonction .; par exemple

function drawCanvas(size1, size2, id) 
{ 
    var canvas = document.getElementById(id); 
var context = canvas.getContext('2d'); 
context.beginPath(); 
context.arc(64, 64, 60, size1*Math.PI, size2*Math.PI, true); 
context.lineWidth = 8; 
context.lineCap = "round"; 
context.strokeStyle = '#c5731e'; 
context.stroke(); 
}

appel cinq fois

Source

2013-08-10 12:12:44 Ashwani

Réduire le balisage JavaScript lors du dessin d'objets en HTML5

Répondre

Questions connexes