Форум программистов, компьютерный форум, киберфорум
JavaScript: HTML5 Canvas
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.53/15: Рейтинг темы: голосов - 15, средняя оценка - 4.53
0 / 0 / 0
Регистрация: 09.01.2011
Сообщений: 94

Как отрисовывать один объект несколько раз! HTML 5 CANVAS

31.12.2012, 03:59. Показов 3021. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Такая история! Есть плавно увеличивающийся круг на полотне canvas! (круг появляется в рандомном месте полотна canvas). Как мне вызывать отрисовку этого круга несколько раз! Ну что бы первый круг увеличивался следом за ним сразу второй за ним сразу третий и каждый с рандомными координатами!

Есть набросок!

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
var canvas, ctx, w,h, game= true; 
var ball, radius;
 
var BALL = function(x,y){ 
    this.x= x; 
    this.y= y;
    
    this.color= "red"; 
    this.radius= 0;   
}
 
window.onload = init; 
 
function init(){
    canvas= document.getElementById("canvas");
    w= canvas.width; 
    h= canvas.height; 
    ctx= canvas.getContext('2d');
    ball= new BALL(Math.floor(Math.random()*450), Math.floor(Math.random()*570));
    beginGame();
 
}
 
 
function beginGame(){
    if(game){
        ctx.clearRect(0,0,w,h);
 
        //Анимация увеличения радиуса круга  
        radius=ball.radius+= 0.1;
 
        //
        ctx.fillStyle = ball.color; 
        ctx.beginPath(); 
        ctx.arc(ball.x, ball.y, ball.radius,0,2*Math.PI,true);
        ctx.closePath(); 
        ctx.fill();
        window.webkitRequestAnimationFrame(beginGame);
    }
    else{
 
    } 
 
}
Добавлено через 15 минут
Может как то использовать функцию setInterval?
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
31.12.2012, 03:59
Ответы с готовыми решениями:

Не получается отрисовывать один объект несколько раз! HTML 5 CANVAS
Здравствуйте! Я хочу, чтобы при клике на canvas добавлялся один объект в виде эллипса с координатами клика мыши. Этих объектов может...

Один и тот же объект в одном выражении модифицируется несколько раз - неопределенное поведение
Уважаемые форумчане! Недавно столкнулся с интересным на мой взгляд необычным поведением компилятора c++ от keil. Определил класс шаблон...

На Canvas нарисовать не связанные области как один объект
Есть ли возможность нарисовать на Canvas различные несвязанные области, чтобы при экспорте в WMF-файл, они интерпретировались как один...

2
 Аватар для JsLoveR
425 / 167 / 48
Регистрация: 05.12.2012
Сообщений: 855
31.12.2012, 16:35
G.a.n.g.s.t.e.r, нехороший способ, но можно так:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
    var canvas, ctx, w,h, game = true; 
    var ball, radius;
     
    var BALL = function(x,y){ 
         this.x = x; 
         this.y = y;
         this.radius = 0;
         this.timer = null;
            
         this.draw = function(color){
             ctx.clearRect(this.x, this.y, this.radius, this.radius);
             this.radius += 0.1;
             ctx.fillStyle = color; 
             ctx.beginPath(); 
             ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI, true);
             ctx.closePath(); 
             ctx.fill();
             var self = this;
              setTimeout(function() {
                 self.draw();
             }, 50);
         }
    }
     
    window.onload = function(){
        init();
        beginGame();
    } 
     
    function init(){
        canvas= document.getElementById("canvas");
        w = canvas.width; 
        h = canvas.height; 
        ctx = canvas.getContext('2d');
    }
         
    function beginGame(){
        if(game){
            setInterval(function(){
                var ball = new BALL(Math.floor(Math.random()*450), Math.floor(Math.random()*570));
                ball.draw("red");
          }, 2000);
        }
    }
HTML5
1
<canvas id="canvas" width="600" height="600"></canvas>
0
0 / 0 / 0
Регистрация: 09.01.2011
Сообщений: 94
01.01.2013, 19:28  [ТС]
JsLoveR, спасибо тебе большое за отклик! Почерпнул полезную информацию из твоего кода ))
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
01.01.2013, 19:28
Помогаю со студенческими работами здесь

Как сделать чтобы объект создавался только один раз?
Пытаюсь сделать объект (класс), который будет вести лог. Как сделать, чтобы инициирование данного объекта производилось только один...

Как объединить несколько полигонов и создать из них один объект
Как объединить несколько полигонов(например острова), создать из них один объект, а потом добавить их так Karta.Children.Add(объект), или...

Как вносить данные в объект сразу по нескольким полям за один раз
Всем привет, допустим, хочу вносить данные в объект в консоли вот так Имя...(курсор здесь и здесь вношу) Фамилия...(потом могу ...

Как из базы вывести один раз запись если их несколько?
Доброго времени суток! Ситуация такая, в есть таблица attendance у которой есть поле date, дата храниться как yyyy-mm-dd (2017-08-11) ...

Как использовать один и тот же case в switch несколько раз?
Как использовать один и тот же case в switch несколько раз?


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru