31.05.2014, 22:13
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
imedia,
|
|
31.05.2014, 23:20
|
 |
junior
|
|
Регистрация: 29.11.2011
Сообщений: 3,924
|
|
|
Сообщение от imedia
|
|
для чего тут вообще учет времени, я хотел диаграмму раскрывающуюся сделать
|
рони, человеку диаграмма нужна раскрывающаяся, а ты ему про время 
Времени всегда не хватает. Больше о времени ничего знать не нужно 
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
|
|
02.06.2014, 12:50
|
|
Профессор
|
|
Регистрация: 20.05.2014
Сообщений: 292
|
|
разобрался, а почему у меня красный не появляется?
<html>
<body>
<canvas id="canvas"> Браузер не поддерживает canvas</canvas>
<script>
window.onload = function() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.style.width=600;
canvas.style.height=300;
canvas.width=1200;
canvas.height=600;
var x = canvas.width /2;
var y = canvas.height / 2;
var counterClockwise = false;
var run_black = function() {
var radius = 210;
var time = (new Date().getTime()- startTime)/ duration;
var startAngle = getRadians(-90);
var endAngle = getRadians(180);
context.lineWidth = 4;
context.strokeStyle = 'rgba(0,0,0,1)';
if(time < 1) {requestAnimationFrame(run_black);
endAngle = startAngle +(endAngle - startAngle)* time;
}
else {
duration = 1000,
startTime = new Date().getTime();
run_red();
};
context.clearRect(0, 0, 600, 300);
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.stroke();
};
var run_red = function() {
var time = (new Date().getTime()- startTime)/ duration;
var radius = 250;
var startAngle = getRadians(-90);
var endAngle = getRadians(0);
if(time < 1) {requestAnimationFrame(run_red);
endAngle = startAngle +(endAngle - startAngle)* time;
}
else {
duration = 1000,
startTime = new Date().getTime();
run_rose();
};
context.clearRect(0, 0, 600, 300);
context.beginPath();
context.strokeStyle = 'rgba(175,9,54,1)';
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.stroke();
};
function run_rose()
{
var time = (new Date().getTime()- startTime)/ duration;
var startAngle = getRadians(-90);
var endAngle = getRadians(0);
context.lineWidth = 22;
var radius = 150;
if(time < 1) {requestAnimationFrame(run_rose);
endAngle = startAngle +(endAngle - startAngle)* time;
};
context.clearRect(0, 0, 600, 300);
context.beginPath();
context.strokeStyle = 'rgba(251,79,134,1)';
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.stroke();
}
var duration = 1000,
startTime = new Date().getTime();
run_black();
function getRadians(degrees) {
return degrees * (Math.PI / 180);
}
}
</script>
</body>
Последний раз редактировалось imedia, 02.06.2014 в 18:25.
|
|
02.06.2014, 12:58
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
imedia,
а где в коде прорисовка красного?
|
|
02.06.2014, 17:23
|
|
Профессор
|
|
Регистрация: 20.05.2014
Сообщений: 292
|
|
|
а куда ее прописать? напишите пожалуйста
|
|
02.06.2014, 17:28
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
imedia,
строка 52 -- должно быть похожее на строки 31 - 34 или 65 - 68
|
|
02.06.2014, 18:26
|
|
Профессор
|
|
Регистрация: 20.05.2014
Сообщений: 292
|
|
|
а почему тогда черная дуга меняет свой цвет на красный? Я сделал как вы сказали
|
|
02.06.2014, 19:48
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
imedia,
функция 1 - рисуем/стираем 1 дугу - постепенно
функция 2 - рисуем/стираем 1 дугу мгновенно - 2 дугу постепенно
функция 3 - рисуем/стираем 1 и 2 дугу мгновенно - 3 дугу постепенно - понимаешь
стираем для сглаживания иначе больше квадратов из-за наложения слоёв
|
|
03.06.2014, 16:38
|
|
Профессор
|
|
Регистрация: 20.05.2014
Сообщений: 292
|
|
Можете мне сказать почему черный круг вдруг возвращается назад на 90 градусов?
<canvas id="canvas"> Браузер не поддерживает canvas</canvas>
<script>
window.onload = function() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.style.width=600;
canvas.style.height=300;
canvas.width=1200;
canvas.height=600;
var x = canvas.width /2;
var y = canvas.height / 2;
var counterClockwise = false;
var run_wight = function() {
var radius = 195;
var time = (new Date().getTime()- startTime)/ duration;
var startAngle = getRadians(-90);
var endAngle = getRadians(360);
context.lineWidth = 4;
context.strokeStyle = 'rgba(0,0,0,1)';
if(time < 1) {requestAnimationFrame(run_wight);
endAngle = startAngle +(endAngle - startAngle)* time;
}
else {
duration = 1000,
startTime = new Date().getTime();
run_red();
};
context.clearRect(0, 0, 600, 300);
context.beginPath();
context.lineWidth = 4;
context.strokeStyle = 'rgba(0,0,0,1)';
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.stroke();
};
var run_red = function() {
var time = (new Date().getTime()- startTime)/ duration;
var radius = 210;
var startAngle = getRadians(-90);
var endAngle = getRadians(0);
context.strokeStyle = 'rgba(175,9,54,1)';
context.lineWidth = 22;
if(time < 1) {requestAnimationFrame(run_red);
endAngle = startAngle +(endAngle - startAngle)* time;
}
else {
duration = 1000,
startTime = new Date().getTime();
run_rose();
};
context.clearRect(0, 0, 600, 300);
context.beginPath();
context.lineWidth = 22;
context.strokeStyle = 'rgba(175,9,54,1)';
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.stroke();
};
function run_rose()
{
var time = (new Date().getTime()- startTime)/ duration;
var startAngle = getRadians(-90);
var endAngle = getRadians(0);
context.lineWidth = 22;
var radius = 180;
if(time < 1) {requestAnimationFrame(run_rose);
endAngle = startAngle +(endAngle - startAngle)* time;
};
context.clearRect(0, 0, 600, 300);
context.beginPath();
context.strokeStyle = 'rgba(251,79,134,1)';
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.stroke();
}
var duration = 1000,
startTime = new Date().getTime();
run_wight();
function getRadians(degrees) {
return degrees * (Math.PI / 180);
}
}
</script>
|
|
03.06.2014, 17:11
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
imedia,
круг не возвращается - это вы четверть круга выкусываите -- прямоугольником стирания
|
|
|
|
