Altering the hue of various stroke patterns

Question

Altering the hue of various stroke patterns

I've encountered an issue where I want to create skill bars that display my skills in percentages. Luckily, I found a great code that allows me to do this. Although I would prefer to do it myself, I haven't come across a good tutorial that teaches me how to (if you know one, please share).

Now, my question is how can I modify 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";

You can find the code I found in the link below.

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

javascript html css

Answer 1

Answer №1

To change the color of elements on your page, comment out the line

self.context.strokeStyle = "#d30000";

. Then, assign an id to each element and set the desired color using

document.getElementById("given-id").getContext( "2d" ).strokeStyle = "#desired-color";

. See example below:

/* Modify the color of elements on a web page */
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>

Answer 2

To change the color of elements on your page, comment out the line

self.context.strokeStyle = "#d30000";

. Then, assign an id to each element and set the desired color using

document.getElementById("given-id").getContext( "2d" ).strokeStyle = "#desired-color";

. See example below:

/* Modify the color of elements on a web page */
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>

Answer 3

Answer №2

If you want to initialize the function, you simply need to provide some arguments when calling the init method.

I made changes to 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, when calling the init function, make sure to pass in 2 parameters for strokeStyle and fillStyle.

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

Update: I have made further adjustments to the pen by incorporating random colors for a more visually appealing effect.

Answer 4

If you want to initialize the function, you simply need to provide some arguments when calling the init method.

I made changes to 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, when calling the init function, make sure to pass in 2 parameters for strokeStyle and fillStyle.

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

Update: I have made further adjustments to the pen by incorporating random colors for a more visually appealing effect.

Answer 5

Answer №3

To manipulate the color attribute, you can follow a similar approach as with the width and height attributes. Simply store the color value within an attribute on the canvas element, then retrieve that value within the progress function.

Explore this example on CodePen

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

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

Answer 6

To manipulate the color attribute, you can follow a similar approach as with the width and height attributes. Simply store the color value within an attribute on the canvas element, then retrieve that value within the progress function.

Explore this example on CodePen

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

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

Altering the hue of various stroke patterns

Answer №1

Answer №2

Answer №3

Similar questions

What is the method for asynchronously loading a javascript file that includes an ajax call?

Sending a personalized event to a JavaScript object

CSS media query to target specific viewport width

Using JavaScript to Redirect to Homepage upon successful Ajax response on local server

What is the best way to organize class usage within other classes to prevent circular dependencies?

Utilize Express.js to seamlessly stream and process uploaded files with formidable and gm, ensuring a streamlined process without

Translating Encryption from Javascript to Ruby

The Angular overlay is concealed beneath the pinned header

Ways to eliminate the border color from bootstrap multiselect

Having trouble with jQuery.cookie saving my JSON data

Angular Checkbox Single Select

Emphasize sections of text within a chart

Utilizing the Grid-A-Licious plugin multiple times within a single webpage

Using Selectpicker with Jquery .on('change') results in the change event being triggered twice in a row

What could be the reason for the checkbox not being selected in a React component

Issue arose following implementation of the function that waits for the event to conclude

Troubleshooting: Else block not functioning as expected within a React JS map function

Filter error - Unable to retrieve property 'toLowerCase' from null value

jQuery element with listener not triggering as expected

Is there a way to make my code on Google Sheets work across multiple tabs?