Форум

Seva Pletnev · #1 (**permalink**) 06.05.2013, 19:14

Здравствуйте люди! Прошу помочь мне сделать перерисовку эрана (в будующим для написания движка). вот есть код:
<html>
<body>
=S.A=
<canvas id="mapclet" width=1000 height=500></canvas>
<script>
var canvas=document.getElementById("mapclet");
var c=canvas.getContext("2d")

c.fillStyle="#00ff00";
c.fillRect(x,y,64,64);
</script>
</body>
</html>

как мне канву вызывать через setInterval ? Это, допустим для изменения координат квадрата (для его передвижения или изменения формы). Ну это в принцимпе для манипуляции координатами и параметрами фигур на холсте. Пожалуста помогите или там обьясните как работает. Я не прошу там пошаговых инструкций)))) Заранее спасибо

ЗЫ: я планирую в этой теме писать про генератор карты на js (для игры).

dmitriymar · #2 (**permalink**) 06.05.2013, 19:23

Здравствуйте!

Судя по вашему сообщению, вы ну совсем не знаете javascript.

Освойте основы языка и вопрос отпадет сам, полностью или частично.
А с чем не справитесь - поможем.

На сайте javascript можно начать изучать с учебника, раздел Основы javascript.
Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/

Задавайте конкретные вопросы по ходу дела.

Hekumok · #3 (**permalink**) 06.05.2013, 22:45

<canvas width = "100px" height = "100px" style = "border: 3px solid black"></canvas>
<script>
var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d"),
x = 50,
y = 50,
speed = 10 ;
ctx.fillStyle = "red" ;
ctx.fillRect(x, y, 10, 10) ;
var i = setInterval(function() {
 if(
  x + 10 >= canvas.width ||
  y + 10 >= canvas.height ||
  x <= 0 ||
  y <= 0
 )
  speed = - speed ;
 ctx.clearRect(x, y, 10, 10) ;
 x += speed ;
 y += speed ;
 ctx.fillRect(x, y, 10, 10) ;
}, 500) ;
</script>

Seva Pletnev · #4 (**permalink**) 07.05.2013, 20:47

Да я правдо не это имел ввиду. Но все равно спасибо.

Seva Pletnev · #5 (**permalink**) 11.05.2013, 13:53

давайте!) меня интересует

Seva Pletnev · #6 (**permalink**) 11.05.2013, 17:48

я про это изночально говорил:

<!DOCTYPE HTML><canvas id=c width=1000 height=600 </canvas>
<script>
c= document.getElementById('c');g= c.getContext('2d');

x= 0; y= 0;

col_a='#800000'; col_b='#0099cc';

setInterval('run()',1);

function run(){
g.fillStyle=col_b;
g.fillRect(x,y,10,10);
x+=10;
if(x==800) {y+=10; x-=800; }
}
</script>

Seva Pletnev · #7 (**permalink**) 12.05.2013, 10:39

g.fillStyle="#00FF00";
g.fillRect(x,y,10,10);
Как сделать поворот фигуры вокруг своей оси? Я не про трансформацию системы координат. Заранее спасибо.
Ну если не фигуру то допустим спрайт?

dmitriymar · #8 (**permalink**) 12.05.2013, 13:19

Сообщение от Seva Pletnev

Как сделать поворот фигуры вокруг своей оси? Я не про трансформацию системы координат. Заранее спасибо.
Ну если не фигуру то допустим спрайт?

трансформацией системы координат.

Seva Pletnev · #9 (**permalink**) 12.05.2013, 13:30

нет другого способа?

dmitriymar · #10 (**permalink**) 12.05.2013, 14:15

Сообщение от Seva Pletnev

нет другого способа?

ну почему же. математический -требует разработки алгоритма и выполняется в сотню раз дольше
в остальном же:

Сообщение от dmitriymar

Здравствуйте!

Судя по вашему сообщению, вы ну совсем не знаете javascript.

Освойте основы языка и вопрос отпадет сам, полностью или частично.
А с чем не справитесь - поможем.

На сайте javascript можно начать изучать с учебника, раздел Основы javascript.
Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/

Задавайте конкретные вопросы по ходу дела.

Форум

Справочник

Discord чат

Курсы javascript