
06.05.2013, 19:14
|
 |
Аспирант
|
|
Регистрация: 06.05.2013
Сообщений: 42
|
|
|
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 (для игры).
|
|

06.05.2013, 19:23
|
|
х.з
|
|
Регистрация: 21.11.2010
Сообщений: 4,588
|
|
Здравствуйте!
Судя по вашему сообщению, вы ну совсем не знаете javascript.
Освойте основы языка и вопрос отпадет сам, полностью или частично.
А с чем не справитесь - поможем.
На сайте javascript можно начать изучать с учебника, раздел Основы javascript.
Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/
Задавайте конкретные вопросы по ходу дела.
|
|

06.05.2013, 22:45
|
 |
✔
|
|
Регистрация: 04.06.2012
Сообщений: 513
|
|
<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>
__________________
★ ²º¹³ ☆
|
|

07.05.2013, 20:47
|
 |
Аспирант
|
|
Регистрация: 06.05.2013
Сообщений: 42
|
|
|
Да я правдо не это имел ввиду. Но все равно спасибо.
|
|

11.05.2013, 13:53
|
 |
Аспирант
|
|
Регистрация: 06.05.2013
Сообщений: 42
|
|
|
давайте!) меня интересует
|
|

11.05.2013, 17:48
|
 |
Аспирант
|
|
Регистрация: 06.05.2013
Сообщений: 42
|
|
|
я про это изночально говорил:
<!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>
|
|

12.05.2013, 10:39
|
 |
Аспирант
|
|
Регистрация: 06.05.2013
Сообщений: 42
|
|
|
g.fillStyle="#00FF00";
g.fillRect(x,y,10,10);
Как сделать поворот фигуры вокруг своей оси? Я не про трансформацию системы координат. Заранее спасибо.
Ну если не фигуру то допустим спрайт?
Последний раз редактировалось Seva Pletnev, 12.05.2013 в 11:43.
|
|

12.05.2013, 13:19
|
|
х.з
|
|
Регистрация: 21.11.2010
Сообщений: 4,588
|
|
|
Сообщение от Seva Pletnev
|
Как сделать поворот фигуры вокруг своей оси? Я не про трансформацию системы координат. Заранее спасибо.
Ну если не фигуру то допустим спрайт?
|
трансформацией системы координат.
|
|

12.05.2013, 13:30
|
 |
Аспирант
|
|
Регистрация: 06.05.2013
Сообщений: 42
|
|
|
нет другого способа?
|
|

12.05.2013, 14:15
|
|
х.з
|
|
Регистрация: 21.11.2010
Сообщений: 4,588
|
|
|
Сообщение от Seva Pletnev
|
|
нет другого способа?
|
ну почему же. математический -требует разработки алгоритма и выполняется в сотню раз дольше
в остальном же:
|
Сообщение от dmitriymar
|
Здравствуйте!
Судя по вашему сообщению, вы ну совсем не знаете javascript.
Освойте основы языка и вопрос отпадет сам, полностью или частично.
А с чем не справитесь - поможем.
На сайте javascript можно начать изучать с учебника, раздел Основы javascript.
Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/
Задавайте конкретные вопросы по ходу дела.
|
Последний раз редактировалось dmitriymar, 12.05.2013 в 14:18.
|
|
|
|