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

你只需要将一些参数传递给init - 函数。

我修改了您的Pen

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

现在你可以使用2个参数调用init函数，用于strokeStyle和填充样式。

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

更新：编辑笔使用随机颜色，以便您可以看到它有效。

Answer 2

您可以使用width和height属性执行相同的操作。将颜色值存储在canvas元素的属性中，并读取该值在进度函数

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

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


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

Answer 3

注释掉以下行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() {
	
	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>

改变不同笔画风格的颜色

3 个答案: