Уменьшение разметки JavaScript при рисовании объектов в HTML5

Я пытаюсь нарисовать несколько кругов, которые будут иметь одинаковые свойства, но другой endAngle, я не хочу писать весь код круга 5 раз, есть ли способ назначить большую часть кода классу и просто изменить одну переменную для 5 разных идентификаторов?Уменьшение разметки JavaScript при рисовании объектов в HTML5

Вот два из кругов

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 и 0,9 * Math.PI единственные вещи, которые собираются менять между окружностями, каким-либо образом я могу написать выше, так Мне не нужно писать все это 5 раз?

источник

2013-08-10 Justin Seals

Вы не должны изменить разметку, вы можете сделать это:

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

Вы не должны дублировать код или вызвать функцию, вы просто добавить элементы в массиве ,

Если вы не можете вывести угол из индекса, то,

либо вы хотите «жёстко» данные, а затем использовать функцию (см другой ответ)
или вы хотите управлять данными как данными.

В последнем случае, вы можете сделать что-то вроде этого:

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

источник

2013-08-10 12:11:54

Прости меня за то, вероятно, будучи на самом деле глупо, я никогда не использовал массивы, если у меня есть 5 кругов, каждый с уникальным углом концовкой, что не формула, как бы Я пишу это в строке context.arc? –

Вы имеете в виду, что вы не можете вывести углы из индекса? Если так, используйте функцию (см. Ответ Эшвина). –

Я не уверен, что такое индекс, и я также не уверен, как написать 5 разных конечных углов из вашего примера выше - извините –

Создать функцию например .;

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

вызова он пять раз

источник

2013-08-10 12:12:44 Ashwani

Уменьшение разметки JavaScript при рисовании объектов в HTML5

ответ

Смежные вопросы