Форум

caetus · #1 (**permalink**) 29.01.2015, 00:18

Сделал progress bar , может есть идеи как сделать проще ? а то что то 2 цикла не очень нравиться ((

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<meta charset="utf-8"> 
<style>
</style>
</head>
<body>

<canvas id="canvas" width="100" height="100"></canvas>
</body>
<script> 

var canvas = document.getElementById('canvas'),
	ctx    = canvas.getContext('2d');


function bar (mas){
var el = mas[mas.length-1];

for(var i = mas.length-2; i >= 0; i--) mas[i+1] = mas[i];
mas[0] = el;

for(var i = 0; i < mas.length; i++) {
	ctx.fillStyle = mas[i];
	ctx.fillRect(i * 20, 50, 10, 10);
}

setTimeout(function(){bar(mas)}, 100)

}

bar(['#B8B8B8', '#A8A8A8', '#989898', '#888888', '#787878'])
</script>
</body>
</html>

рони · #2 (**permalink**) 29.01.2015, 02:01

caetus,
строка 16 заменяет ваш 1 цикл , остальное просто для примера.

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<canvas id="canvas" width="100" height="100"></canvas>
<script>
var canvas = document.getElementById('canvas'),
	ctx    = canvas.getContext('2d');
function bar (mas){
function draw() {
  mas.unshift(mas.pop());
  for (var i = 0; i < mas.length; i++){
    ctx.lineWidth = 10;
    ctx.strokeStyle = mas[i]  ;
    ctx.beginPath();
    ctx.moveTo(5+i*20,10);
    ctx.lineTo(5+i*20,20);
    ctx.stroke();
  }
 setTimeout(draw, 100)
}
draw()
}
bar(['#B8B8B8', '#A8A8A8', '#989898', '#888888', '#787878'])
</script>
</body>
</html>

DeV1doR · #3 (**permalink**) 29.01.2015, 02:14

caetus,
посоветуй учебник по canvas. Спс.

caetus · #4 (**permalink**) 29.01.2015, 02:26

для canvas хватит справочника , ну для общего развития могу посоветовать Графика на JavaScript — Рафаэлло Чекко (создания игр canvas)

caetus · #5 (**permalink**) 29.01.2015, 02:34

Рони спасибо за помощь , еще интересует один вопрос! выбран ли правильный путь решения задачи ?
P.S программированием занимаюсь в свободно время (работаю по другой специальности ) вот и очень часто возникают вопросы в правильности решения задач (((

рони · #6 (**permalink**) 29.01.2015, 02:52

caetus,
эту задачу лучше сделать на css
http://www.paulund.co.uk/playground/...ading-spinner/
http://blog.pexels.com/css-only-loaders/

Форум

Справочник

Discord чат

Курсы javascript