Возник вопрос, как лучше перемещать обьекты(фигуры, картинки) по 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>