перемещение обьектов на канве
Возник вопрос, как лучше перемещать обьекты(фигуры, картинки) по canvas
вот что пришло в голову(очистил , нарисовал ) , но почему то мне кажеться что это не очень производительно. что посоветуете ?
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Template</title>
<style>
canvas {
width:500px;
height:500px;
margin:50px;
border:2px solid black;
}
</style>
</head>
<body>
<canvas id="canv">Удалите нафиг свой Internet Explorer:)</canvas>
<a href="#" id="move">Move</a>
<script>
var canva = document.getElementById("canv");
canva.width = "500";
canva.height = "500";
var ctx = canva.getContext("2d");
var img = new Image();
img.src = "https://lh5.googleusercontent.com/-6tOrIXWWPU8/UI7g-2-XCaI/AAAAAAAAAFs/kWml_77qhyI/s165/img.gif";
var loaded;
img.onload = function () {
ctx.drawImage(this, 100, 100,165,58);
loaded = true;
};
//move
var move = document.getElementById("move");
move.onclick = function () {
if (!loaded) {
alert("не загружено");
return;
}
Move();
return false;
};
function Move() {
var x = 100,y = 100;
!function mv() {
ctx.clearRect(x,y,165,58);
x+=20;
ctx.drawImage(img, x, y, 165, 58);
if(x< 335) setTimeout(mv, 50);
}();
}
</script>
</body>
</html>
|
эм.. , никто не работал с canvas ?O_o
|
cyber,
просто ты поиском по сайту пользоваться не умеешь |
dmitriymar,да вроде искал нечего такого и нет, или я провтыкал?
|
1 подход)Два канваса один друг над другом
Фон на нижнем канвасе постоянен, рисуем на верхнем, очистка только верхнего clearRect. 2 подход) Перерисовываем кадр целиком 3 приём) если куча, если куча обьектов в одной области, то рендерем в буфер к примеру 300x300 пикселей, затем вставляем результат как картинку. на форуме в том или ином виде уже обсуждалось, + статьи на хабре и в инете кое что |
Цитата:
|
Цитата:
Я уже разобрался в общем, нашел на msdn все ответы Но вопрос был немного в другом : можно ли перемещать обьекты на канве как дом обьекты , тюе просто изменить координаты ? - ответ: нет. П.с вопрос не много туповат но все же лучше уточнить(сор за глупую тему)=) |
Цитата:
черт было бы время сел бы читать книгу, а так приходиться задавать тупые вопросы.=( |
Цитата:
https://developer.mozilla.org/en-US/...imizing_canvas |
Цитата:
|
| Часовой пояс GMT +3, время: 21:41. |