Maison >interface Web >Tutoriel H5 >Explication détaillée du code graphique de l'image HTML5 Canvas (2)
L'article précédent parlait principalement de l'API d'image de base fournie par canvas
Dans cet article, nous utilisons canevas ; Fourni une API d'image et une transformation pour réaliser quelques exemples : simple mouvement de voiture, jeu simple carte , traduction d'image et zoom
utilisé dans les applications suivantes Image :
Image 1 : chars- -[32 *32]*8--tanks.png
|
Image 2 : carte--[32*32]*4--map.png | ||||
Notre position sur Canvas (50,50) Comment afficher la première partie 1/8 des réservoirs (le premier réservoir) ? Nous utilisons une partie de l'API image ;
context.drawImage(tanks,0,0,32,32,50,50,32,32);
Comment faire pivoter le réservoir actuel de 90 degrés ?
L'opération de rotation dans Canvas est la même que ce soit pour la forme, le texte ou l'image
Premier de ; tout, vous devez pousser l'état actuel du canevas sur la pile : context.save();
puis démarrer la transformation : context.setTransform(1, 0,0,1,0 ,0);
Nous voulons faire une rotation de 90 degrés avec le réservoir lui-même comme centre, nous devons donc traduire l'origine au centre du réservoir
La position (x, y) du réservoir est (50, 50), et la taille (w, h) est (32, 32) ; (x+w/2, y+h/2);
Origine de la traduction : context.translate(50 + 16, 50 + 16);
Rotation : context.rotate(90*Math.PI /180);
Remarque : à l'origine, l'image devait être dessinée à la position (50,50) de le canevas. Une fois l'origine traduite, les coordonnées de position sont devenues (-16,-16 );
Dessinez une image : context.drawImage(tanks, 0, 0, 32, 32 , -16, -16, 32, 32);
图片旋转---完整代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Images</title> <script type="text/javascript" src="../script/modernizr-latest.js"></script> <script type="text/javascript"> window.addEventListener("load", eventWindowLoaded, false); function eventWindowLoaded() { canvasApp(); } function canvasSupport() { return Modernizr.canvas; } function canvasApp() { if(!canvasSupport()) { return; } var theCanvas = document.getElementById("canvasOne"); var context = theCanvas.getContext("2d"); var tanks = new Image(); tanks.addEventListener('load', eventLoaded, false); tanks.src = "tanks.png"; var x = 50; var y = 50; function eventLoaded() { drawScreen(); } function drawScreen() { context.fillStyle = "#aaaaaa"; context.fillRect(0, 0, 500, 500); context.save(); context.setTransform(1, 0, 0, 1, 0, 0) context.translate(x + 16, y + 16); var angleInRadians = 90 * Math.PI / 180; context.rotate(angleInRadians); context.drawImage(tanks, 0, 0, 32, 32, -16, -16, 32, 32); context.restore(); } } </script> </head> <body> <div style="position: absolute; top: 50px; left: 50px;"> <canvas id="canvasOne" width="500" height="500"> Your browser does not support HTML5 Canvas. </canvas> </div> </body> </html>
Animation rotation des roues
Réservoirs Il y a 8 réservoirs au total, chaque taille d'image est (32,32 );
Et si nous voulons afficher le deuxième réservoir à la position de (50, 50) ?
Le 2ème : context.drawImage(tanks, 32*(2-1), 0, 32, 32, -16, -16, 32, 32);
Le 3ème : context.drawImage(tanks, 32*(3-1), 0, 32, 32, -16, -16, 32, 32);
Et ainsi de suite, le 8ème : context.drawImage(tanks, 32*(8-1), 0, 32, 32, -16, -16, 32, 32);
La différence entre chaque image de char réside dans sa partie roue. Si nous utilisons un timer 100ms pour afficher ces 1 à 8 images de char à tour de rôle, nous verrons une animation de rotation de la roue du char ;
tank轮子转动动画--完整代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Images</title> <script type="text/javascript" src="../script/modernizr-latest.js"></script> <script type="text/javascript"> window.addEventListener("load", eventWindowLoaded, false); function eventWindowLoaded() { canvasApp(); } function canvasSupport() { return Modernizr.canvas; } function canvasApp() { if(!canvasSupport()) { return; } var theCanvas = document.getElementById("canvasOne"); var context = theCanvas.getContext("2d"); var tanks = new Image(); tanks.addEventListener('load', eventLoaded, false); tanks.src = "tanks.png"; //控制取第几个tank var animationFrames = [0,1,2,3,4,5,6,7]; var frameIndex = 0;//当前动画帧 //tank的显示位置 var x = 50; var y = 50; function eventLoaded() { startUp(); } function drawScreen() { context.fillStyle = "#aaaaaa"; context.fillRect(0, 0, 500, 500); context.save(); context.setTransform(1, 0, 0, 1, 0, 0) context.translate(x + 16, y + 16); var angleInRadians = 90 * Math.PI / 180; context.rotate(angleInRadians); var sourceX = animationFrames[frameIndex] * 32;//每次取图片的X位置 context.drawImage(tanks, sourceX, 0, 32, 32, -16, -16, 32, 32); context.restore(); frameIndex++; //循环动画控制 if(frameIndex == animationFrames.length) { frameIndex = 0; } } //计时器 function startUp() { setInterval(drawScreen, 100); } } </script> </head> <body> <div style="position: absolute; top: 50px; left: 50px;"> <canvas id="canvasOne" width="500" height="500"> Your browser does not support HTML5 Canvas. </canvas> </div> </body> </html>
l'effet de mouvement horizontal du char est facile à mettre en œuvre, il suffit de changer chaque image d'animation à chaque fois, la position x affichée de l'image du réservoir est ok ;
fonction drawScreen(){x=x+1;…………} ! !
Nous définissons un canevas de taille 320*320 et utilisons une carte illustrée pour dessiner une carte de jeu simple
La carte illustrée comporte quatre petites images, toutes de 32*32 : arrière-plan principal, obstacles, briques du haut et du bas, briques de gauche et de droite
Première ; Enfin, nous divisons la toile en 10*10 petites grilles, et la taille de chaque petite grille est de 32*32, ce qui est exactement la même taille que l'image
Ensuite, nous définir un Tableau bidimensionnel est utilisé pour stocker l'index de l'image à afficher dans chaque petite grille
puis une boucle à deux couches est utilisée ; pour dessiner l'image, et la carte sort
Jetez d'abord un œil aux rendus :
简单的游戏地图--完整代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Images</title> <script type="text/javascript" src="../script/modernizr-latest.js"></script> <script type="text/javascript"> window.addEventListener("load", eventWindowLoaded, false); function eventWindowLoaded() { canvasApp(); } function canvasSupport() { return Modernizr.canvas; } function canvasApp() { if(!canvasSupport()) { return; } var theCanvas = document.getElementById("canvasOne"); var context = theCanvas.getContext("2d"); var tileSheet = new Image(); tileSheet.addEventListener('load', eventLoaded, false); tileSheet.src = "map.png"; var mapRows = 10; var mapCols = 10; var Map = [ [3, 2, 2, 2, 0, 2, 2, 2, 2, 3], [0,0,0,0,0,0,0,0,0, 0], [3,0, 1,0, 1,0, 1,0,0, 3], [3, 1,0,0, 1,0,0, 1,0, 3], [3,0,0,0, 1, 1,0, 1,0, 3], [3,0,0, 1,0,0,0, 1,0, 3], [3,0,0,0,0,0,0, 1,0, 3], [0,0, 1,0, 1,0, 1,0,0, 0], [3,0,0,0,0,0,0,0,0, 3], [3, 2, 2, 2,0, 2, 2, 2, 2, 3] ]; function eventLoaded() { drawScreen() } function drawScreen() { for(var rowCtr = 0; rowCtr < mapRows; rowCtr++) { for(var colCtr = 0; colCtr < mapCols; colCtr++) { var cur = Map[rowCtr][colCtr]; var sourceX = cur * 32; context.drawImage(tileSheet, sourceX, 0, 32, 32, colCtr * 32, rowCtr * 32, 32, 32); } } } } </script> </head> <body> <div style="position: absolute; top: 50px; left: 50px;"> <canvas id="canvasOne" width="320" height="320"> Your browser does not support HTML5 Canvas. </canvas> </div> </body> </html>
avant de partager une application Image Api :
图像的平移缩放 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Pan</title> <script type="text/javascript" src="../script/modernizr-latest.js"></script> <script type="text/javascript"> window.addEventListener("load", eventWindowLoaded, false); function eventWindowLoaded() { canvasApp(); } function canvasSupport() { return Modernizr.canvas; } function canvasApp() { if(!canvasSupport()) { return; } var theCanvas = document.getElementById("canvasOne"); var context = theCanvas.getContext("2d"); var panImg = new Image(); panImg.addEventListener('load', eventPhotoLoaded, false); panImg.src = "pan.jpg"; var windowWidth = 500; var windowHeight = 500; var windowX = 0; var windowY = 0; var currentScale = 1; var minScale = .2 var maxScale = 3; var scaleIncrement = 0.1; function eventPhotoLoaded() { startUp(); } function drawScreen() { context.fillStyle = "#ffffff"; context.fillRect(0, 0, 500, 500); context.drawImage(panImg, windowX, windowY, windowWidth, windowHeight, 0, 0, windowWidth * currentScale, windowHeight * currentScale); } function startUp() { setInterval(drawScreen, 100); } document.onkeydown = function(e) { e = e ? e : window.event; switch (e.keyCode) { case 38: //up windowY -= 10; if(windowY < 0) { windowY = 0; } break; case 40: //down windowY += 10; if(windowY > photo.height - windowHeight) { windowY = photo.height - windowHeight; } break; case 37: //left windowX -= 10; if(windowX < 0) { windowX = 0; } break; case 39: //right windowX += 10; if(windowX > photo.width - windowWidth) { windowX = photo.width - windowWidth; } break; case 109: //- currentScale -= scaleIncrement; if(currentScale < minScale) { currentScale = minScale; } break; case 107: //+ currentScale += scaleIncrement; if(currentScale > maxScale) { currentScale = maxScale; } } } } </script> </head> <body> <div style="position: absolute; top: 50px; left: 50px; padding:5px solid #000000"> <canvas id="canvasOne" width="500" height="500"> Your browser does not support HTML5 Canvas. </canvas> </div> </body> </html>
该代码中,有一个图片"pan.jpg",大家随便找一个比较大的图就可以;
快运行,看看效果吧!
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!