Maison > Article > interface Web > Explication détaillée du code graphique de l'image HTML5 Canvas (2)

Explication détaillée du code graphique de l'image HTML5 Canvas (2)

黄舟original: 2017-03-28 15:45:481437parcourir

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

图片1：tanks--[3232]8--tanks.png	图片2：map--[3232]4--map.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(&#39;load&#39;, 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(&#39;load&#39;, 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(&#39;load&#39;, 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(&#39;load&#39;, 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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée du code graphique de l'image HTML5 Canvas (1)Article suivant：Explication détaillée du code graphique de l'image HTML5 Canvas (1)

Articles Liés

Voir plus