Я пытаюсь добавить некоторую анимацию при изменении endAngle дуги холста, как это, но она не работает! не могли бы вы дать мне знать, как это сделать? БлагодаряПроблема с уменьшением хода холста с анимацией

var steps =30; 
 
var canvas = document.getElementById('myCanvas'); 
 
var context = canvas.getContext('2d'); 
 
var x = canvas.width/2; 
 
var y = canvas.height/2; 
 
var radius = 75; 
 
var startAngle = 1.5 * Math.PI; 
 
var endAngle = 1.4999 * Math.PI; 
 
var counterClockwise = false; 
 

 
context.beginPath(); 
 
context.arc(x, y, radius, startAngle, endAngle, counterClockwise); 
 
context.lineWidth = 15; 
 

 
context.strokeStyle = 'black'; 
 
context.stroke(); 
 

 
setTimeout(function(){ 
 
    endAngle = endAngle - 1; 
 
    context.beginPath(); 
 
    context.arc(x, y, radius, startAngle, endAngle, counterClockwise); 
 
    context.stroke(); 
 
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="myCanvas" width="250" height="250"></canvas>

2017-02-07 user1760110

новый ответ

Всякий раз, когда вы что-то нарисовать на холсте не стиранию, что ранее было обращено на него. Вы должны сделать это вручную, как это:

context.fillStyle="#ffffff"; 
context.fillRect(0,0,250,250); 
//draw here

полное решение:

<html> 
<body> 

<canvas id="myCanvas" width="250" height="250"></canvas> 
<script language=javascript> 

var steps =30; 
var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
var x = canvas.width/2; 
var y = canvas.height/2; 
var radius = 75; 
var startAngle = 1.5 * Math.PI; 
var endAngle = 1.49 * Math.PI; 
var counterClockwise = false; 

context.beginPath(); 
context.arc(x, y, radius, startAngle, endAngle, counterClockwise); 
context.lineWidth = 15; 

context.strokeStyle = 'black'; 
context.stroke(); 

setInterval(function(){ 
    context.fillStyle="#ffffff"; 
    context.fillRect(0,0,250,250); 
    endAngle = endAngle - 0.01; 
    context.beginPath(); 
    context.arc(x, y, radius, startAngle, endAngle, counterClockwise); 
    context.stroke(); 
}, 10); 

</script> 

</body> 
</html>

старый ответ

Ну есть несколько вещей. У вас есть ваш по часовой стрелке и против часовой стрелки, заставляя круг быть полностью заполненным до начала «анимации».

, если вы хотите его по часовой стрелке, а затем положить конечный угол вперед, как это:

var startAngle = 1.5 * Math.PI; 
var endAngle = 1.51 * Math.PI;

А затем увеличить угол в вашей анимации тайм-аута вместо уменьшения:

endAngle = endAngle+1;

и, наконец, ваш тайм-аут должен быть интервалом, а не таймаутом. Тайм-аут будет запускаться только один раз. просто как изменить его на

setInterval(function(){...

Вам также не нужен jquery для этого кода.

источник

2017-02-07 22:56:52 CodeCabin

Спасибо, спасибо за комментарии, но, как я уже сказал, я хотел бы уменьшить круг! что происходит сейчас, он увеличивается с помощью 'endAngle = endAngle + 1;' – user1760110

Я вижу, что вы имеете в виду сейчас Я обновлю ответ – CodeCabin

Спасибо, но как можно сломать рисунок после окончания Arc? – user1760110

Проблема с уменьшением хода холста с анимацией

ответ

новый ответ

старый ответ

Смежные вопросы