При создании игр, интерактивных карт и т.п. часто требуется работа с Canvas.
Она помогает создавать красочные мультимедийные элементы на сайте.
Рисование изображений, определение координат мыши, всё это необходимо для современной анимации.
Для того, чтобы создать интерактивное приложение сначала создаем canvas:
Динамическое создание изображений мы сделаем с помощью new Image();
Callback на загрузку изображений задаётся функцей onload
Поворачивать изображение будем с помощью функции rotate:
Рисование изображения, повернутого на градус degrees в точку (x,y)
Функция сохраняет все что было нарисовано до этого, поворачивает холст и рисует изображение.
Затем возвращает подложку в нормальное состояние, а изображение на хосте остается развернутым
Код в сборе:
Пример работы скрипта:
Спасибо за внимание.
1 | <canvas id="canvas" width="860px" height="400px"></canvas> |
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;window.addEventListener('load', function(){ canvas = document.getElementById("canvas"); 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);}); |
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>window.addEventListener('load', 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> |