Explication détaillée du code graphique de l'image HTML5 Canvas (2)-Tutoriel H5-php.cn

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);

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

该代码中，有一个图片"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!