imedia,
:-? |
Цитата:
Времени всегда не хватает. Больше о времени ничего знать не нужно :no: |
разобрался, а почему у меня красный не появляется?
<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,
а где в коде прорисовка красного? |
а куда ее прописать? напишите пожалуйста
|
imedia,
строка 52 -- должно быть похожее на строки 31 - 34 или 65 - 68 |
а почему тогда черная дуга меняет свой цвет на красный? Я сделал как вы сказали
|
imedia,
функция 1 - рисуем/стираем 1 дугу - постепенно функция 2 - рисуем/стираем 1 дугу мгновенно - 2 дугу постепенно функция 3 - рисуем/стираем 1 и 2 дугу мгновенно - 3 дугу постепенно - понимаешь стираем для сглаживания иначе больше квадратов из-за наложения слоёв |
Можете мне сказать почему черный круг вдруг возвращается назад на 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>
|
imedia,
круг не возвращается - это вы четверть круга выкусываите -- прямоугольником стирания |
| Часовой пояс GMT +3, время: 13:33. |