Появилась возможность благодаря элемту Canvas создание сложной графики. Рисование фигур, диаграммы, схем, графики, фото, видео, вообщем возможности богатые.
В своем примере я покажу лишь некоторые возможности использования Canvas. Это рисование окружности, копирование области изображения, рисование графического файла.
В примере рисуется звездное небо, затем на него помещается изображение спутника, и это изображение можно перемещать по звездному небу стрелками клавиатуры.
HTML код
JavaScript код
В своем примере я покажу лишь некоторые возможности использования Canvas. Это рисование окружности, копирование области изображения, рисование графического файла.
В примере рисуется звездное небо, затем на него помещается изображение спутника, и это изображение можно перемещать по звездному небу стрелками клавиатуры.
Демо стенд
HTML код
<body onload="canvasSpaceGame()"> <p> HTML 5 Canvas. <br/> Для перемещения спутника используйте стрелки клавиатуры. Работа примера проверена в FireFox. </p> <p> <canvas height="400" width="600" id="myCanvas"></canvas> </p> <a href="http://dlodenan.ucoz.ru/index/0-5" target="_blank"> <b>Примеры Demo стенда</b></a> </body>
JavaScript код
// Глобальные переменные var canvas;// canvas var ctx;// context var back = new Image();// созранение фона var oldBack = new Image();// созранение предыдущего фона var satelliteObj = new Image();// спутник var satelliteX = 0;// текущее положение спутника по X var satelliteY = 0;// текущее положение спутника по Y var oldsatelliteX = 0;// предыдущее положение спутника по Х var oldsatelliteY = 0;// предыдущее положение спутника по Y // Вызов на page load. function canvasSpaceGame() { // получить canvas canvas = document.getElementById("myCanvas"); if (canvas.getContext) { // тип контекста рисования ctx = canvas.getContext("2d"); ctx.fillStyle = "black"; ctx.rect(0, 0, 600, 400); ctx.fill(); // нарисовать звезды stars(); // нарисовать спутник makeSatellite(); } // обработчик нажатия клавиш window.addEventListener('keydown', whatKey, true); } // рисовать звезды function stars() { // 70 звезд. for (i = 0;i <= 70;i++) { // случайное положение var x = Math.floor(Math.random() * 599); var y = Math.floor(Math.random() * 399); // Make the stars white ctx.fillStyle = "white"; // рисование звезды ctx.beginPath(); ctx.arc(x, y, 3, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); } // сохранить фон. back = ctx.getImageData(0, 0, 70, 50); oldBack = back; } function makeSatellite() { satelliteObj.onload = function () { back = ctx.getImageData(0, 0, 70, 50); ctx.drawImage(satelliteObj, 1, 1); }; satelliteObj.src = 'resources/img/satellite.png'; } // Обработка нажатия клавиш function whatKey(evt) { var flag = 0; var arrowFlag = 0; // предыдущие значения oldsatelliteX = satelliteX; oldsatelliteY = satelliteY; oldBack = back; switch (evt.keyCode) { // Left arrow. case 37: arrowFlag = 1; satelliteX = satelliteX - 70; if (satelliteX < 0) { satelliteX = 0; flag = 1; } break; // Right arrow. case 39: arrowFlag = 1; satelliteX = satelliteX + 70; if (satelliteX > 530) { satelliteX = 530; flag = 1; } break; // Down arrow case 40: arrowFlag = 1; satelliteY = satelliteY + 50; if (satelliteY > 350) { satelliteY = 350; flag = 1; } break; // Up arrow case 38: arrowFlag = 1; satelliteY = satelliteY - 50; if (satelliteY < 0) { satelliteY = 0; flag = 1; } break; } // если выход за границы, остаться на месте if (flag) { satelliteX = oldsatelliteX; satelliteY = oldsatelliteY; back = oldBack; } else { // если нажаты стрелки if (arrowFlag == 1) { // сохранить фон перед спутником до перемещения back = ctx.getImageData(satelliteX, satelliteY, 70, 50); // фостановить фон на старом положении спутника ctx.putImageData(oldBack, oldsatelliteX, oldsatelliteY); // переместить спутник ctx.drawImage(satelliteObj, satelliteX, satelliteY); } } }
Демо стенд
Комментариев нет:
Отправить комментарий