Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   canvas: пререрисовака экрана (https://javascript.ru/forum/dom-window/37772-canvas-prererisovaka-ehkrana.html)

Seva Pletnev 06.05.2013 19:14

canvas: пререрисовака экрана
 
Здравствуйте люди! Прошу помочь мне сделать перерисовку эрана (в будующим для написания движка). вот есть код:
<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 06.05.2013 19:23

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

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

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

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

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

Hekumok 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 07.05.2013 20:47

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

Seva Pletnev 11.05.2013 13:53

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

Seva Pletnev 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 12.05.2013 10:39

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

dmitriymar 12.05.2013 13:19

Цитата:

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

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

Seva Pletnev 12.05.2013 13:30

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

dmitriymar 12.05.2013 14:15

Цитата:

Сообщение от Seva Pletnev
нет другого способа?

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

Сообщение от dmitriymar
Здравствуйте!

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

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

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

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



Часовой пояс GMT +3, время: 04:15.