Ändern der Farbe der verschiedenen Strichstile

Question

Ich stoße auf ein Problem, wo ich Skillbars erstellen möchte, die meine Fähigkeiten in Prozenten anzeigen. Jetzt habe ich einen guten Code gefunden, mit dem ich das machen kann. Ich würde es natürlich lieber selbst machen, aber ich habe kein gutes Tutorial gefunden, das mir beibringt, wie man es macht (wenn du eines kennst, würde ich es gerne benutzen).

Aber meine Frage ist jetzt, wie ändere ich die Farben dieser verschiedenen Striche?

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

Der Code, den ich gefunden habe, ist in der Verbindung unten.

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

Answer 1

Kommentieren Sie die folgende Zeile self.context.strokeStyle = "#d30000"; diesen Wert in der Fortschrittsfunktion gelesen und dann können Sie die Farbe, die Sie für wollen definieren jedes der Elemente in Ihrer Seite, indem Sie ihnen eine id geben und document.getElementById("given-id").getContext("2d").strokeStyle = "#desired-color"; verwenden. Beispiel unten:

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

Sie müssen nur einige Argumente für die init -function passieren.

ich bearbeitete Pen

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

Jetzt können Sie die init Funktion mit 2 Parametern für stroke anrufen und fillStyle.

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

Update: Edited der Stift zufällige Farben zu verwenden, so dass Sie es in der Tat sehen können.

Answer 3

können Sie das gleiche wie mit den Attributen Breite und Höhe tun. speichern den Farbwert in einem Attribut auf dem Canvas-Element, und

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

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


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