English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Этот пример делится с вами динамической анимацией загрузки Canvas с помощью таймера, которую вы можете использовать в качестве справки, подробности см. ниже
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500">Ваш браузер не поддерживает технологию canvas</canvas>
<script>
var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
ctx.translate(c.width/2, c.height/2);
//Сначала нарисовать 8 статических окружностей, окружающих
function create() {
for (var i = 1; i < 9; i++) {
if (i==1) {
ctx.beginPath();
ctx.arc(0, -30, 5, 0, 2 * Math.PI);
ctx.fillStyle='#f0f';
ctx.fill();
}else{
ctx.beginPath();
ctx.arc(0, -30, 5, 0, 2 * Math.PI);
ctx.strokeStyle ='#000';
ctx.stroke();
}
ctx.rotate(Math.PI * 45 / 180);
}
}
//Периодическое вращение
setInterval(function(){
ctx.clearRect(-c.width/2,-c.height, c.width, c.height);
create();
ctx.rotate(Math.PI*45/180);
},300);
//Закрытие загрузки по таймеру
setTimeout(function(){
c.style.display='none';
},12200);
//
</script>
</body>
</html>
Вот весь контент этой статьи, надеюсь, он поможет вам в изучении. Также希望大家多多支持呐喊教程。
Заявление: содержание этой статьи взято из Интернета, авторские права принадлежат соответствующему автору, контент предоставлен пользователями Интернета в качестве добровольного вклада и загружен самостоятельно, сайт не имеет права собственности на него, не производилось редактирование вручную и не несет ответственности за связанные с этим法律责任. Если вы обнаружите подозрительное содержание, пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма замените # на @) для жалоб и предоставьте соответствующие доказательства. Если после проверки подтвердится, что содержится подозрительное нарушение авторских прав, сайт немедленно удаляет спорное содержимое.