Форум программистов, компьютерный форум, киберфорум
JavaScript: HTML5 Canvas
Форум программистов и сисадминов Киберфорум > Форум web-программистов > JavaScript > JavaScript: HTML5 Canvas
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.68/22: Рейтинг темы: голосов - 22, средняя оценка - 4.68
1 / 1 / 2
Регистрация: 14.11.2010
Сообщений: 57

Анимация плывущего кораблика на canvas

24.05.2012, 11:18. Показов 4744. Ответов 4
Метки нет (Все метки)
Студворк — интернет-сервис помощи студентам
Сделать анимацию в HTML: Кораблик плывущий по волнам.
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
 24.05.2012, 11:18
Ответы с готовыми решениями:

Анимация кораблика по волнам под солнцем
Нужна программа которая реализует кораблик плывущий по воде внизу, и сверху слева светит солнце.

анимация canvas
При помощи метода Canvas разработать приложение, в котором изображается домик, с трубы которого идет дым, а по небу перемещается луна.

Анимация на Canvas
Всем привет! Можно ли с помощью JS или CSS анимировать фигуры canvas после того, когда они были отрисованы. К примеру, на одном холсте...

4
 Аватар для Sergio Aguero
452 / 443 / 21
Регистрация: 11.04.2012
Сообщений: 2,076
24.05.2012, 14:17
Цитата Сообщение от strag 93 Посмотреть сообщение
Сделать анимацию в HTML: Кораблик плывущий по волнам.
может во флеше вы имели ввиду???
з.ы. html это всего лишь язык разметки - это даже не программный язык)))
0
1 / 1 / 2
Регистрация: 14.11.2010
Сообщений: 57
24.05.2012, 16:23  [ТС]
Мне нада, что бы я в Опере мог открыть и посмотреть, сказали разработать с помощью "canvas".
0
Нарушитель
 Аватар для gulliver
86 / 86 / 9
Регистрация: 09.05.2012
Сообщений: 456
24.05.2012, 19:46
Вот на подобие этого сделать кораблик можно. задай чу-чуть другие координаты. и все

anim.js:
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

function anim(canvas, fps, clear)
{
    var context = canvas.getContext("2d");
    var interval = null;
    var update = null;
    var draw = null;
 
    this.update = function(func) {
        update = func;
    };
 
    this.draw = function(func) {
        draw = func;
    };
 
    var step = function() {
        if (clear) {
            context.clearRect(0, 0, canvas.width, canvas.height);;
        }
        if (update !== null) {
            update();
        }
        if (draw !== null) {
            draw();
        }
    };
 
    this.stop = function() {
        clearInterval(interval);
    };
 
    this.play = function() {
        if (draw !== null) {
            draw();
        }
        interval = setInterval(step, 1000 / fps);
    };
}
Теперь пример работы данного класса (файл example.js):
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

function circle(x, y, r) // класс задающий круг
{
    this.x = x; // координата х
    this.y = y; // координата у
    this.r = r; // радиус
    this.draw = function(context, color, globalAlpha) // метод рисующий круг
    {
        context.globalAlpha = globalAlpha; // "прозрачность"
        context.fillStyle = color; // цвет заливки
        context.beginPath();
        context.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
        context.fill();
    };
}
 
function rect(x, y, width, height) // класс прямоугольника
{
    this.x = x; // координата х
    this.y = y; // координата у
    this.width = width; // ширина
    this.height = height; // высота
    // функция рисует прямоугольник согласно заданным параметрам
    this.draw = function(context, color, globalAlpha) {
        context.globalAlpha = globalAlpha;
        context.fillStyle = color;
        context.fillRect(this.x, this.y, this.width, this.height);
    };
}
 
function init() // инициализация
{
    var screen = new rect(0, 0, 480, 320);
    var ball = new circle(240, 160, 25);
    var vX = 5;
    var vY = 5;
    var canvas = document.getElementById("example");
    canvas.width = screen.width;
    canvas.height = screen.height;
    var context = canvas.getContext("2d");
    var game = new anim(canvas, 50, false);
    game.draw(function() {
        screen.draw(context, "#000", 0.5);
        ball.draw(context, "#f00", 1);
    });
    game.update(function() {
        if (ball.y - ball.r < 0 || ball.y + ball.r > 320) // соприкосновение с "полом" и "потолком" холста
        {
            vY = -vY;
        }
        if (ball.x - ball.r < 0 || ball.x + ball.r > 480) // соприкосновение с левой и правой "стенкой" холста 
        {
            vX = -vX;
        }
        // приращение координат
        ball.x += vX;
        ball.y += vY;
    });
    screen.draw(context, "#000", 1);
    ball.draw(context, "#f00", 1);
    var click = false;
    // по шелчку мыши останавливаем обновление холста,
    // если холст остановлен продолжаем анимацию
    canvas.onclick = function() {
        if (!click) {
            click = true;
            game.play();
        } else {
            click = false;
            game.stop();
        }
    };
}

html файл:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12

<html> 
    <head>   
        <meta charset = "utf-8">
        <title>canvasPong</title>
        <script src="anim.js"></script>
        <script src="example.js"></script>
    </head>
    <body>
        <canvas id="example"></canvas>
        <script>init();</script>
    </body> 
</html>
0
1 / 1 / 2
Регистрация: 14.11.2010
Сообщений: 57
24.05.2012, 23:27  [ТС]
Вот мне дали пример как нада сделать, тока тут ананасы падают, а мне надо нарисовать кораблик на плывущий по волнам.


HTML5
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176

<!DOCTYPE html>
<html>
<head>
<meta charset="windows1251">
<title>Компьютерная графика</title> 
</head>
<body onLoad="init()">
<canvas id='canvas' style='border:1px solid' width='600' height='500'></canvas>
<script type="text/javascript">
var canvas, w,h, ctx;
var circle = {centerX:250, centerY:250,r:125,angle:0};
var ball = {x:0,y:0,speed:.02};
var rectY=170,rectW=40;
var rectX=200;
var x1=(Math.PI/180)*0;
var x2=(Math.PI/180)*360;
//var rInc = -0.5;
var ax=320,ay=220,ax1=240,ay1=220,ax2=ax,ay2=ay;
 
 
function init(){
canvas = document.getElementById("canvas");
w = canvas.width;
h = canvas.height;
ctx = canvas.getContext('2d');
ctx.font = "14px Times-Roman";
ctx.fillStyle="#99d8e4";
ctx.fillRect(0,0,w,200);
 
var img=new Image();
img.src='tex.jpg';
img.onload = function () {
var tex=ctx.createPattern(img,"repeat");
ctx.strokeStyle="black";
ctx.fillStyle=tex;
ctx.beginPath();
ctx.moveTo(50,70);
ctx.bezierCurveTo(60,40,90,40,100,60);
ctx.bezierCurveTo(110,50,130,50,140,60);
ctx.bezierCurveTo(150,50,170,50,190,60);
ctx.bezierCurveTo(200,60,200,90,190,90);
ctx.bezierCurveTo(200,100,180,120,170,120);
ctx.bezierCurveTo(160,130,150,140,140,130);
ctx.bezierCurveTo(130,140,120,140,100,130);
ctx.bezierCurveTo(90,130,80,130,70,120);
ctx.bezierCurveTo(40,120,30,80,50,70);
ctx.stroke();
ctx.fill();
ctx.closePath();
}
setInterval(draw,33);
//draw();
}
 
function clear(){
var x1=(Math.PI/180)*0;
var x2=(Math.PI/180)*360;
w = canvas.width;
h = canvas.height;
var palmx=w-300;
canvas = document.getElementById("canvas");
ctx = canvas.getContext('2d');
var grd=ctx.createLinearGradient(w-100,h,w-100,h-220);
grd.addColorStop("1","#f18c1a");
grd.addColorStop("0","#bf7500");
 
ctx.fillStyle="#f9fc66";
ctx.fillRect(0,200,w,h);
//ветки
ctx.lineWidth=10;
ctx.lineCap='round';
ctx.strokeStyle="#50b436";
for(var i=0;i<5;i++)
{
ctx.beginPath();
ctx.moveTo(270,220);
ctx.bezierCurveTo(250-15*i,230-15*i,240-15*i,250-15*i,240-17*i,280-15*i);
ctx.stroke();
ctx.closePath();
}
var opa=80;
for(var i=0;i<5;i++)
{
ctx.beginPath();
ctx.moveTo(290,220);
ctx.bezierCurveTo(250+15*i+opa,230-15*i,240+15*i+opa,250-15*i,240+17*i+opa,280-15*i);
ctx.stroke();
ctx.closePath();
}
ctx.beginPath();
ctx.moveTo(290,220);
ctx.bezierCurveTo(290,200,310,180,360,150);
ctx.moveTo(290,220);
ctx.bezierCurveTo(290,210,360,140,420,200);
ctx.moveTo(270,220);
ctx.bezierCurveTo(260,180,180,160,140,200);
ctx.moveTo(270,220);
ctx.bezierCurveTo(260,200,240,150,200,150);
ctx.moveTo(280,220);
ctx.bezierCurveTo(260,200,300,120,330,110);
ctx.moveTo(290,220);
ctx.bezierCurveTo(290,200,300,120,220,110);
ctx.moveTo(280,220);
ctx.bezierCurveTo(280,220,290,160,200,130);
ctx.moveTo(280,220);
ctx.bezierCurveTo(280,220,290,160,360,120);
ctx.stroke();
ctx.closePath();
 
//ствол
ctx.lineWidth=0.1;
ctx.strokeStyle="#000000";
for(var j=0;j<4;j++)
{
for (var i=0;i<36;i++)
{if(i%2==0)
{ctx.beginPath();
ctx.arc(palmx-10*j,h-2-8*i,7,x1,x2);
ctx.fillStyle=grd;
ctx.fill();
ctx.stroke();
ctx.closePath();
}
else
{
ctx.beginPath();
ctx.arc(palmx-5-10*j,h-8*i,7,x1,x2);
ctx.fillStyle=grd;
ctx.fill();
ctx.stroke();
ctx.closePath();    
}
}
}
}
function draw(){
if (ay<=468)
{
clear();
ctx.lineWidth=1;
ctx.lineCap='round';
ctx.strokeStyle="#black";
ctx.fillStyle="#ffbe00";
ctx.beginPath();
ctx.moveTo(ax,ay);
ctx.bezierCurveTo(ax-15,ay-4,ax-15,ay+35,ax,ay+30);
ctx.moveTo(ax,ay);
ctx.bezierCurveTo(ax+15,ay-4,ax+15,ay+35,ax,ay+30);
ctx.stroke();
ctx.fill();
ctx.closePath();
 
ctx.strokeStyle="#00cc00";
ctx.beginPath();
ctx.moveTo(ax,ay);
ctx.bezierCurveTo(ax-2,ay-5,ax-4,ay-5,ax-7,ay-5);
ctx.moveTo(ax,ay);
ctx.bezierCurveTo(ax+2,ay-5,ax+4,ay-5,ax+7,ay-5);
ctx.moveTo(ax,ay);
ctx.bezierCurveTo(ax-1,ay-8,ax-3,ay-8,ax-5,ay-8);
ctx.moveTo(ax,ay);
ctx.bezierCurveTo(ax+1,ay-8,ax+3,ay-8,ax+5,ay-8);
ctx.stroke();
ctx.closePath();
ay+=2;
 
}
else
{
if (ax!=ax1) {ay=ay1; ax=ax1;} else {ay=ay2;ax=ax2}
}
 
}
</script>
</body>
</html>
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
 24.05.2012, 23:27
Помогаю со студенческими работами здесь

Canvas анимация
Есть квадрат, например 150х150. Внутри него лежат 3 точки и соединены линиями, эти точки перемещаются в этом квадрате, как можно сделать...

Анимация canvas
как сделать в дельфи (или в lazurus если кто знает) анимацию графическим примитивом на canvas? типа form1.canvas...и тд

Анимация Canvas
В случае анимации примитивов на основании наследников Geometry и Path в сети достаточно много примеров и документации. А что делать, если...

Циклическая анимация Canvas
Доброго времени суток! Помогите с простым примером, пожалуйста! Необходимо сделать анимацию с помощью Канвы, текстуры загруженной в Битмап...

Анимация Canvas,Timage
Здравствуйте, возникла проблема при выполнении задания, вообщем-то необходимо построить модель атома. Суть проблемы состоит в анимации...


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

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru