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

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

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

Author24 — интернет-сервис помощи студентам
Такая история! Есть плавно увеличивающийся круг на полотне 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 добавлялся один объект в виде эллипса с...

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

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

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

2
425 / 167 / 48
Регистрация: 05.12.2012
Сообщений: 855
31.12.2012, 16:35 2
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  [ТС] 3
JsLoveR, спасибо тебе большое за отклик! Почерпнул полезную информацию из твоего кода ))
0
01.01.2013, 19:28
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
01.01.2013, 19:28
Помогаю со студенческими работами здесь

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

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

Как из базы вывести один раз запись если их несколько?
Доброго времени суток! Ситуация такая, в есть таблица attendance у которой есть поле date, дата...

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


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

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Как написать микросервис на Go/Golang с Kafka и GitHub CI/CD
InfoMaster 14.01.2025
Определение микросервиса, преимущества использования Go/ Golang Микросервис – это архитектурный подход к разработке программного обеспечения, при котором приложение состоит из небольших, независимо. . .
Как написать микросервис с нуля на C# с RabbitMQ, CQRS и CI/CD
InfoMaster 14.01.2025
В современном мире разработки программного обеспечения микросервисная архитектура стала стандартом де-факто для создания масштабируемых и гибких приложений. Этот архитектурный подход предполагает. . .
Как создать интернет-магазин на PHP и JavaScript
InfoMaster 14.01.2025
В современном мире электронная коммерция стала неотъемлемой частью бизнеса. Создание собственного интернет-магазина открывает широкие возможности для предпринимателей, позволяя достичь большей. . .
Как написать Тетрис на Ассемблере
InfoMaster 14.01.2025
Тетрис – одна из самых узнаваемых и популярных компьютерных игр, созданная в 1984 году советским программистом Алексеем Пажитновым. За прошедшие десятилетия она завоевала симпатии миллионы людей по. . .
Как создать игру "Танчики" на Unity3d и C#
InfoMaster 14.01.2025
Разработка игр – это увлекательный процесс, сочетающий в себе творчество и технические навыки. В этой статье мы рассмотрим создание классической игры "Танчики" с использованием Unity3D и языка. . .
Организую платный онлайн микро-курс по доработке Android-клиента Telegram
_Ivana 14.01.2025
Официальная версия и распространенные форки не полностью устраивают? Сделай свою кастомную версию клиента! 4 занятия по 2 часа (2 недели пн, ср 19:00-21:00 по Москве). Первое вводное занятие. . .
Как создать приложение для фитнеса для iOS/iPhone на Kotlin
InfoMaster 14.01.2025
Создание собственного фитнес-приложения — это не только захватывающий, но и полезный процесс, ведь оно может стать вашим верным помощником на пути к здоровому и активному образу жизни. В современных. . .
Как создать приложение магазина для iOS/iPhone на Swift
InfoMaster 14.01.2025
Введение в разработку iOS-приложений Разработка приложений для iPhone и других устройств на базе iOS открывает огромные возможности для создания инновационных мобильных решений. В данной статье мы. . .
Это работает. Скорость асинхронной логики велика. Вопрос видимо останется в стабильности. Плата - огонь!
Hrethgir 13.01.2025
По прошлому проекту в Logisim Evolution https:/ / www. cyberforum. ru/ blogs/ 223907/ blog8781. html прилагаю файл архива проекта в Gowin Eda. Восьмибитный счётчик из сумматора+ генератор сигнала. . .
UserScript для подсветки кнопок языков программировани­­­­я в зависимости от текущего раздела
volvo 13.01.2025
В результате работы этого скрипта подсвечиваются нужные кнопки не только в форме быстрого ответа, но и при редактировании сообщения: / / ==UserScript== / / @name CF_DefaultLangSelect / / . . .
Введение в модели и алгоритмы машинного обучения
InfoMaster 12.01.2025
Машинное обучение представляет собой одну из наиболее динамично развивающихся областей искусственного интеллекта, которая фокусируется на разработке алгоритмов и методов, позволяющих компьютерам. . .
Как на Python создать нейросеть для решения задач
InfoMaster 12.01.2025
В контексте стремительного развития современных технологий особое внимание уделяется таким инструментам, как нейросети. Эти структуры, вдохновленные биологическими нейронными сетями, используются для. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru