суббота, 22 января 2011 г.

HTML5. Canvas. ч.1.

Да, руки у меня доросли и до сабжа - буду ковырять.
Первая поделка: http://minidune.narod.ru/canvas2.html
Исходный код под катом...


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
<html>
<head>
  <title>canvasExample</title>
</head>

<body onload="Main()">
<canvas height='640' width='480' id='herovina'>Обновите браузер</canvas>
</body>

<script>

//Тут пишем сам текст проги на js

//Служебные переменные
var herovina = document.getElementById("herovina"),
    ctx = herovina.getContext('2d'),
    timer=0,//таймер, в мс
    frameRate = 10,//длительность 1 цикла, в мс - аналог delay()
    win_DX=herovina.width,
    win_DY=herovina.height;

//Переменные   
var player_x,
    player_y,
    player_dx,
    player_dy;

//Стадия инициализации
function Init()
 {
  player_x=win_DX/2;
  player_y=win_DY/2;
  
  player_dx=1;
  player_dy=1;
  
 }    

//Стадия обновления
function RefreshStuff() 
 {
  player_x=player_x+player_dx;
  player_y=player_y+player_dy;
  
  if (player_x>=win_DX || player_x<0) {player_dx=-player_dx;}
  if (player_y>=win_DY || player_y<0) {player_dy=-player_dy;}

 }

//Стадия отрисовки
function Draw() 
 {
  //Вывод текста  
  ctx.fillStyle = "rgb(58,95,205)";
  ctx.font = "10px Arial";
  ctx.textBaseline = "top";
  ctx.fillText(timer,1,1);  

  //Вывод объекта
  ctx.fillStyle = "rgb(0,0,205)";
  ctx.fillRect(player_x, player_y, 50, 50);
 }

//Стадия обновления
function Refresh() 
 {
  timer +=frameRate;//считаем таймер
  //Очистка задника
  ctx.clearRect(0,0,herovina.width, herovina.height);
  ctx.beginPath();
  
  //Обновление всего
  RefreshStuff();
  
  //Стадия отрисовки всего
  Draw();

  setTimeout("Refresh()", frameRate);
 }

//Главная функция
function Main() 
 {
  Init();
  
  setTimeout("Refresh()",0);//0 - в начале запуска отсутствует пауза
 }   

</script>
</html>

Комментариев нет:

Отправить комментарий