Изменение цвета различных стилей штриха

Question

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

Но теперь мой вопрос заключается в том, как изменить цвета этих разных штрихов?

self.context.clearRect(0, 0, self.width, self.height); 
     self.context.lineWidth = 10; 
     self.context.fillStyle = "#000"; 
     self.context.strokeStyle = "#666"; 
     self.context.textAlign = "center"; 

Код, который я нашел, указан по ссылке ниже.

http://codepen.io/gabrieleromanato/pen/OVprOW

Answer 1

закомментируйте следующую строку self.context.strokeStyle = "#d30000";, а затем вы можете определить цвет, который вы хотите для каждый из элементов на вашей странице, указав их id и используя document.getElementById("given-id").getContext("2d").strokeStyle = "#desired-color";. Пример ниже:

/* Credits: 
 
* https://www.developphp.com/video/JavaScript/Circular-Progress-Loader-Canvas-JavaScript-Programming-Tutorial 
 
*/ 
 
document.getElementById("csscan").getContext("2d").strokeStyle = "#d30000"; 
 
document.getElementById("html5can").getContext("2d").strokeStyle = "blue"; 
 
(function() { 
 
\t 
 
\t var Progress = function(element) { 
 
\t \t 
 
\t \t this.context = element.getContext("2d"); 
 
\t \t this.refElement = element.parentNode; 
 
\t \t this.loaded = 0; 
 
\t \t this.start = 4.72; 
 
\t \t this.width = this.context.canvas.width; 
 
\t \t this.height = this.context.canvas.height; 
 
\t \t this.total = parseInt(this.refElement.dataset.percent, 10); 
 
\t \t this.timer = null; 
 
\t \t 
 
\t \t this.diff = 0; 
 
\t \t 
 
\t \t this.init(); \t 
 
\t }; 
 
\t 
 
\t Progress.prototype = { 
 
\t \t init: function() { 
 
\t \t \t var self = this; 
 
\t \t \t self.timer = setInterval(function() { 
 
\t \t \t \t self.run(); \t 
 
\t \t \t }, 25); 
 
\t \t }, 
 
\t \t run: function() { 
 
\t \t \t var self = this; 
 
\t \t \t 
 
\t \t \t self.diff = ((self.loaded/100) * Math.PI * 2 * 10).toFixed(2); \t 
 
\t \t \t self.context.clearRect(0, 0, self.width, self.height); 
 
\t \t \t self.context.lineWidth = 10; 
 
\t \t \t self.context.fillStyle = "#000"; 
 
\t \t \t //self.context.strokeStyle = "#d30000"; 
 
\t \t \t self.context.textAlign = "center"; 
 
\t \t \t 
 
\t \t \t self.context.fillText(self.loaded + "%", self.width * .5, self.height * .5 + 2, self.width); 
 
\t \t \t self.context.beginPath(); 
 
\t \t \t self.context.arc(35, 35, 30, self.start, self.diff/10 + self.start, false); 
 
\t \t \t self.context.stroke(); 
 
\t \t \t 
 
\t \t \t if(self.loaded >= self.total) { 
 
\t \t \t \t clearInterval(self.timer); 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t self.loaded++; 
 
\t \t } 
 
\t }; 
 
\t 
 
\t var CircularSkillBar = function(elements) { 
 
\t \t this.bars = document.querySelectorAll(elements); 
 
\t \t if(this.bars.length > 0) { 
 
\t \t \t this.init(); 
 
\t \t } \t 
 
\t }; 
 
\t 
 
\t CircularSkillBar.prototype = { 
 
\t \t init: function() { 
 
\t \t \t this.tick = 25; 
 
\t \t \t this.progress(); 
 
\t \t \t 
 
\t \t }, 
 
\t \t progress: function() { 
 
\t \t \t var self = this; 
 
\t \t \t var index = 0; 
 
\t \t \t var firstCanvas = self.bars[0].querySelector("canvas"); 
 
\t \t \t var firstProg = new Progress(firstCanvas); 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t var timer = setInterval(function() { 
 
\t \t \t \t index++; 
 
\t \t \t \t \t 
 
\t \t \t \t var canvas = self.bars[index].querySelector("canvas"); 
 
\t \t \t \t var prog = new Progress(canvas); 
 
\t \t \t \t 
 
\t \t \t \t if(index == self.bars.length) { 
 
\t \t \t \t \t \t clearInterval(timer); 
 
\t \t \t \t } 
 
\t \t \t \t 
 
\t \t \t }, self.tick * 100); 
 
\t \t \t \t 
 
\t \t } 
 
\t }; 
 
\t 
 
\t document.addEventListener("DOMContentLoaded", function() { 
 
\t \t var circularBars = new CircularSkillBar("#bars .bar"); 
 
\t }); 
 
\t 
 
})();

#bars { 
 
\t margin: 2em auto; 
 
\t max-width: 960px; 
 
\t overflow: hidden; 
 
} 
 

 
.bar { 
 
\t float: left; 
 
\t width: 20%; 
 
\t text-align: center; 
 
} 
 

 
.bar h3 { 
 
\t font-size: 1.4em; 
 
\t font-weight: normal; 
 
\t margin: 0; 
 
\t text-transform: uppercase; 
 
} 
 

 
.bar-circle { 
 
\t display: block; 
 
\t margin: 0.7em auto; 
 
}

<div id="bars"> 
 
\t <div class="bar" data-percent="100" > 
 
\t \t <h3>CSS</h3> 
 
\t \t <canvas class="bar-circle" width="70" height="70" id="csscan"></canvas> 
 
\t </div> 
 
\t <div class="bar" data-percent="100"> 
 
\t \t <h3>HTML5</h3> 
 
\t \t <canvas class="bar-circle" width="70" height="70" id="html5can"></canvas> 
 
\t </div> 
 
\t <div class="bar" data-percent="100"> 
 
\t \t <h3>JavaScript</h3> 
 
\t \t <canvas class="bar-circle" width="70" height="70"></canvas> 
 
\t </div> 
 
\t <div class="bar" data-percent="100"> 
 
\t \t <h3>PHP</h3> 
 
\t \t <canvas class="bar-circle" width="70" height="70"></canvas> 
 
\t </div> 
 
\t <div class="bar" data-percent="80"> 
 
\t \t <h3>Server</h3> 
 
\t \t <canvas class="bar-circle" width="70" height="70"></canvas> 
 
\t </div> 
 
</div> \t

Answer 2

Вы просто должны передать некоторые аргументы init -функции.

Я редактировал ваш Pen

init: function(fillStyle, strokeStyle) { 
     var self = this; 
     self.context.fillStyle = fillStyle, 
     self.context.strokeStyle = strokeStyle, 
     self.timer = setInterval(function() { 
     self.run(); 
    }, 25); 
} 

Теперь вы можете вызвать функцию init с 2-мя параметрами для StrokeStyle и FillStyle.

this.init('#0F0', '#F00'); 

Update: Edited пера использовать случайные цвета, так что вы можете увидеть его в действии.

Answer 3

вы можете сделать то же самое, что и с атрибутами ширины и высоты. хранить значение цвета в качестве атрибута элемента холста, и прочитать, что значение в функции прогресса

http://codepen.io/anon/pen/yJpNbG

<canvas class="bar-circle" color="blue" width="70" height="70"></canvas> 


this.color = element.getAttribute('color') || "#d30000"; //default