CODEWITHSUNDEEP
javascripthtmlcss
Salman
Salman

Reputation: 1034

Changing the color of different stroke styles

I'm running into an issue where i want to create skill bars displaying my skills in percentages. Now i've found a good code that let's me do that. I would of course rather do it myself, but i haven't found a good tutorial that teaches me how to (if you know one i'd be glad to use it).

But my question now is how do i change the colors of these different strokes? 

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

The code that i had found is in the link below.

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

Upvotes: 2

Views: 1013

Answers (3)

Angelos Chalaris
Angelos Chalaris

Reputation: 6707

Comment out the following line self.context.strokeStyle = "#d30000"; and then you can define the color you want for each of the elements in your page by giving them an id and using document.getElementById("given-id").getContext( "2d" ).strokeStyle = "#desired-color";. Example below:

/* 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() {
	
	var Progress = function( element ) {
		
		this.context = element.getContext( "2d" );
		this.refElement = element.parentNode;
		this.loaded = 0;
		this.start = 4.72;
		this.width = this.context.canvas.width;
		this.height = this.context.canvas.height;
		this.total = parseInt( this.refElement.dataset.percent, 10 );
		this.timer = null;
		
		this.diff = 0;
		
		this.init();	
	};
	
	Progress.prototype = {
		init: function() {
			var self = this;
			self.timer = setInterval(function() {
				self.run();	
			}, 25);
		},
		run: function() {
			var self = this;
			
			self.diff = ( ( self.loaded / 100 ) * Math.PI * 2 * 10 ).toFixed( 2 );	
			self.context.clearRect( 0, 0, self.width, self.height );
			self.context.lineWidth = 10;
			self.context.fillStyle = "#000";
			//self.context.strokeStyle = "#d30000";
			self.context.textAlign = "center";
			
			self.context.fillText( self.loaded + "%", self.width * .5, self.height * .5 + 2, self.width );
			self.context.beginPath();
			self.context.arc( 35, 35, 30, self.start, self.diff / 10 + self.start, false );
			self.context.stroke();
			
			if( self.loaded >= self.total ) {
				clearInterval( self.timer );
			}
			
			self.loaded++;
		}
	};
	
	var CircularSkillBar = function( elements ) {
		this.bars = document.querySelectorAll( elements );
		if( this.bars.length > 0 ) {
			this.init();
		}	
	};
	
	CircularSkillBar.prototype = {
		init: function() {
			this.tick = 25;
			this.progress();
			
		},
		progress: function() {
			var self = this;
			var index = 0;
			var firstCanvas = self.bars[0].querySelector( "canvas" );
			var firstProg = new Progress( firstCanvas );
			
			
			
			var timer = setInterval(function() {
				index++;
					
				var canvas = self.bars[index].querySelector( "canvas" );
				var prog = new Progress( canvas );
				
				if( index == self.bars.length ) {
						clearInterval( timer );
				} 
				
			}, self.tick * 100);
				
		}
	};
	
	document.addEventListener( "DOMContentLoaded", function() {
		var circularBars = new CircularSkillBar( "#bars .bar" );
	});
	
})();
#bars {
	margin: 2em auto;
	max-width: 960px;
	overflow: hidden;
}

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

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

.bar-circle {
	display: block;
	margin: 0.7em auto;
}
<div id="bars">
	<div class="bar" data-percent="100" >
		<h3>CSS</h3>
		<canvas class="bar-circle" width="70" height="70" id="csscan"></canvas>
	</div>
	<div class="bar" data-percent="100">
		<h3>HTML5</h3>
		<canvas class="bar-circle" width="70" height="70" id="html5can"></canvas>
	</div>
	<div class="bar" data-percent="100">
		<h3>JavaScript</h3>
		<canvas class="bar-circle" width="70" height="70"></canvas>
	</div>
	<div class="bar" data-percent="100">
		<h3>PHP</h3>
		<canvas class="bar-circle" width="70" height="70"></canvas>
	</div>
	<div class="bar" data-percent="80">
		<h3>Server</h3>
		<canvas class="bar-circle" width="70" height="70"></canvas>
	</div>
</div>

Upvotes: 1

CodeToad
CodeToad

Reputation: 4734

you can do same as with the width and height attributes. store the color value in an attribute on the canvas element, and read that value in the progress function

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

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


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

Upvotes: 1

KRONWALLED
KRONWALLED

Reputation: 1442

You just have to pass some arguments to the init-function.

I edited your Pen

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

Now you can call the init function with 2 parameters for strokeStyle and fillStyle.

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

Update: Edited the pen to use random colors so you can see it in effect.

Upvotes: 1

Related Questions