创建径向定时器

时间:2017-02-13 00:35:49

标签: javascript html5-canvas

我想创建一个径向计时器。 问题是,当我尝试设置开始和结束角度时,圆弧绘制不正确。

多数民众赞成,我想要的: enter image description here

这是我的代码:



var Timer = function Timer(selector) {
				var _width = 134;
				var _height = 134;
				var _x = _width / 2;
				var _y = _height / 2;
				var _canvas = null;
				var _context = null;
				var _percentage = 0;
				var _background = '#000000';
				var _foreground = '#FF0000';
				
				this.init = function init(selector) {
					var element	= document.querySelector(selector);
					_canvas		= document.createElement('canvas');
					
					_canvas.setAttribute('width', _width);
					_canvas.setAttribute('height', _height);
					element.parentNode.replaceChild(_canvas, element);
					_context = _canvas.getContext('2d');
				
					this.paint();
				};
				
				this.clear = function clear() {
					_context.clearRect(0, 0, _width, _height);
				};
				
				this.start = function start(seconds) {
					var current		= seconds;
					var _watcher = setInterval(function AnimationInterval() {
						_percentage = 100 * current / seconds;
						
						if(_percentage < 0) {
							_percentage = 0;
							clearInterval(_watcher);
						} else if(_percentage > 100) {
							_percentage = 100;
							clearInterval(_watcher);
						}
						
						this.paint();
						
						console.log(_percentage + '%');
						--current;
					}.bind(this), 1000);
				};
				
				this.paint = function paint() {
					this.clear();
					this.paintBackground();
					this.paintForeground();
				};
				
				this.paintForeground = function paintForeground() {
					_context.beginPath();
					_context.arc(_x, _y, 134 / 2 - 5, -(Math.PI / 2), ((Math.PI * 2) * _percentage) - (Math.PI / 2), false);
					_context.lineWidth		= 8;
					_context.strokeStyle	= _foreground;
					_context.stroke();				
				};
				
				this.paintBackground = function paintBackground() {
					_context.beginPath();
					_context.arc(_x, _y, 134 / 2 - 5, 0, Math.PI * 2, false);
					_context.lineWidth		= 10;
					_context.strokeStyle	= _background;
					_context.stroke();
				};
				
				this.init(selector);
			};

			var timer = new Timer('timer');
			timer.start(10);
&#13;
<timer></timer>
&#13;
&#13;
&#13;

你能告诉我,我做错了吗?

0 个答案:

没有答案