Рисование и вращение изображения в Canvas

При создании игр, интерактивных карт и т.п. часто требуется работа с Canvas. Она помогает создавать красочные мультимедийные элементы на сайте. Рисование изображений, определение координат мыши, всё это необходимо для современной анимации. Для того, чтобы создать интерактивное приложение сначала создаем canvas:  
1
<canvas id="canvas" width="860px" height="400px"></canvas>
Динамическое создание изображений мы сделаем с помощью %b%new Image();%/b% Callback на загрузку изображений задаётся функцей %b%onload%/b% Поворачивать изображение будем с помощью функции rotate:  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//задаем начальные переменные
var canvas, context, rotation=0,image,bg, x,y;
$(document).ready(function(){
    canvas=$("#canvas")[0];
    context=canvas.getContext("2d");
 
    //Создаем и загружаем изображения
    bg=new Image();
    bg.onload=repaint;
    image=new Image();
    //При движении мыши перерисовываем наш холст
    canvas.onmousemove=function(e){repaint(e.offsetX,e.offsetY);}
 
  //функция перерисовки холста
  function repaint(X,Y){
    if(X) x=X-image.width/2;
    if(Y) y=Y-image.height/2;
    context.drawImage(bg,0,0);
    drawRotated(context,image,x,y,rotation++);
  }
  setInterval(function(){rotation+=2; repaint();},20);
});
Рисование изображения, %b%повернутого%/b% на градус degrees в точку (x,y) Функция сохраняет все что было нарисовано до этого, поворачивает холст и рисует изображение. Затем возвращает подложку в нормальное состояние, а изображение на хосте остается развернутым  
1
2
3
4
5
6
7
function drawRotated(context,image,x,y,degrees){
  context.save();
  context.translate(x+image.width/2,y+image.height/2);
  context.rotate(degrees*Math.PI/180);
  context.drawImage(image,-image.width/2,-image.height/2);
  context.restore();
}
  Код в сборе:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<canvas id="canvas" width="860px" height="400px"></canvas>
<script>
$(document).ready(function () {
  var rotation = 0, x, y;
  var context = document.getElementById("canvas").getContext("2d");
  var bg = new Image();
  bg.src = "/images/news/104-lovely-mountain.jpg";
  var image = new Image();
  image.src = "/images/logo_v2.png";
  bg.onload = repaint;
  canvas.onmousemove = function (e) {
    repaint(e.offsetX, e.offsetY);
  }
  
  function drawRotated() {
    context.save();
    context.translate(x + image.width / 2, y + image.height / 2);
    context.rotate(rotation * Math.PI / 180);
    context.drawImage(image, -image.width / 2, -image.height / 2);
    context.restore();
  }
  
  function repaint(X, Y) {
    if (context) {
        context.drawImage(bg, 0, 0);
        if (typeof X !== 'undefined') x = X - image.width / 2;
        if (typeof Y !== 'undefined') y = Y - image.height / 2;
        drawRotated();
    }
  }
  
  setInterval(function () {
    rotation += 2;
    repaint();
  }, 20);
});
</script>
Пример работы скрипта: 
  Спасибо за внимание.
Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне e@gohtml.ru