progress bar идеи по оптимизации
Сделал 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>
|
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>
|
caetus,
посоветуй учебник по canvas. Спс. |
для canvas хватит справочника , ну для общего развития могу посоветовать Графика на JavaScript — Рафаэлло Чекко (создания игр canvas)
|
Рони спасибо за помощь , еще интересует один вопрос! выбран ли правильный путь решения задачи ?
P.S программированием занимаюсь в свободно время (работаю по другой специальности ) вот и очень часто возникают вопросы в правильности решения задач ((( |
caetus,
эту задачу лучше сделать на css http://www.paulund.co.uk/playground/...ading-spinner/ http://blog.pexels.com/css-only-loaders/ |
| Часовой пояс GMT +3, время: 13:32. |