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

react-native-track-player failing to play song requested from Express server

How can I customize the color of Chrome's default date and time picker to a different shade of blue?

Experiencing Issues with File Downloading on Express Server with Axios and Js-File-Download Library

Positioning the video tag bar in HTML is a crucial element to

Attempting to replace the checkbox image resulted in no changes

A guide to dynamically rendering pages in Next.js

Unable to upload photo using Ajax request

Uploading and downloading files to a localhost server using PHP

Styling a div element in CSS so that it adjusts its size to fit its

How to customize a dropdown menu with the size property?

Learn how to run javascript code using Nodejs child_process and Meteor

Changing the value of a form input name after a $scope.$watch event is activated

Chaining promises: The benefits of attaching an error handler during Promise creation versus appending it to a variable containing a promise

Utilizing window.location.pathname in Next.js for precise targeting

Change PHP code to a JSON file format

Superior method to ensure the child element's border overlaps with that of the parent

Strange flickering/visualization issue experienced with transparent MeshPhongMaterial in Three.JS

What is the most effective method to implement a toggle function using only JavaScript, without any reliance on jQuery?

Tips for preventing browsers from losing style information stored in inputs

The Angular module instantiation failed with the error message: "[$injector:modulerr] Failed to