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

Maison

interface Web

Tutoriel H5

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

黄舟

Mar 28, 2017 pm 03:45 PM

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 connexe

H5 est-il un raccourci pour HTML5? Explorer les détailsApr 14, 2025 am 12:05 AM

H5 n'est pas seulement l'abréviation de HTML5, il représente un écosystème de technologie de développement Web moderne plus large: 1. H5 comprend HTML5, CSS3, JavaScript et API et technologies connexes; 2. Il offre une expérience utilisateur plus riche, interactive et fluide et peut fonctionner de manière transparente sur plusieurs appareils; 3. À l'aide de la pile de technologie H5, vous pouvez créer des pages Web réactives et des fonctions interactives complexes.

H5 et HTML5: termes couramment utilisés dans le développement WebApr 13, 2025 am 12:01 AM

H5 et HTML5 se réfèrent à la même chose, à savoir HTML5. HTML5 est la cinquième version de HTML, apportant de nouvelles fonctionnalités telles que les balises sémantiques, la prise en charge multimédia, la toile et les graphiques, le stockage hors ligne et le stockage local, l'amélioration de l'expressivité et de l'interactivité des pages Web.

À quoi se réfère H5? Explorer le contexteApr 12, 2025 am 12:03 AM

H5Referstohtml5, apivotaltechnologyInwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp OrtsMultimeDiaHithoutPlugins, améliorant la réception detièmeaCrOsDevices.3) SemantelelementsImproveContentsTructureAndSeo.4) H5'sRespo

H5: outils, cadres et meilleures pratiquesApr 11, 2025 am 12:11 AM

Les outils et les frameworks qui doivent être maîtrisés dans le développement H5 incluent Vue.js, React et WebPack. 1.Vue.js convient à la construction d'interfaces utilisateur et prend en charge le développement des composants. 2. React optimise le rendu de la page via Virtual DOM, adapté aux applications complexes. 3.WebPack est utilisé pour l'emballage des modules et optimiser le chargement des ressources.

L'héritage de HTML5: Comprendre H5 dans le présentApr 10, 2025 am 09:28 AM

Html5hassignifytransformedwebdevelopmentByIntroduCingSémanticElements, améliorant laMultimeSupport, et improvingperformance.1) itmadewebsitesMoreAccessSiblendSeo-friendlywithsemiticslike, et.2)

Code H5: accessibilité et HTML sémantiqueApr 09, 2025 am 12:05 AM

H5 améliore l'accessibilité des pages Web et les effets SEO via des éléments sémantiques et des attributs ARIA. 1. Utiliser, etc. pour organiser la structure du contenu et améliorer le référencement. 2. Les attributs ARIA tels que Aria-Babel améliorent l'accessibilité, et les utilisateurs de technologies d'assistance peuvent utiliser en douceur les pages Web.

H5 est-il le même que HTML5?Apr 08, 2025 am 12:16 AM

"H5" et "HTML5" sont les mêmes dans la plupart des cas, mais ils peuvent avoir des significations différentes dans certains scénarios spécifiques. 1. "Html5" est une norme définie par W3C qui contient de nouvelles balises et API. 2. "H5" est généralement l'abréviation de HTML5, mais dans le développement mobile, il peut se référer à un cadre basé sur HTML5. Comprendre ces différences aide à utiliser ces termes avec précision dans votre projet.

Quelle est la fonction de H5?Apr 07, 2025 am 12:10 AM

H5, ou HTML5, est la cinquième version de HTML. Il fournit aux développeurs un ensemble d'outils plus fort, ce qui facilite la création d'applications Web complexes. Les fonctions principales de H5 incluent: 1) des éléments qui permettent de dessiner des graphiques et des animations sur les pages Web; 2) Tags sémantiques tels que, etc. pour rendre la structure de la page Web claire et propice à l'optimisation du référencement; 3) de nouvelles API telles que GeolocationAPI prennent en charge les services basés sur la localisation; 4) La compatibilité entre les navigateurs doit être assurée par le biais de tests de compatibilité et de bibliothèque polyfillaire.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Meilleurs paramètres graphiques

3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

2 Il y a quelques semainesByDDD

R.E.P.O. Comment réparer l'audio si vous n'entendez personne

4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Comment déverrouiller tout dans Myrise

1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Navigateur d'examen sécurisé

Safe Exam Browser est un environnement de navigation sécurisé permettant de passer des examens en ligne en toute sécurité. Ce logiciel transforme n'importe quel ordinateur en poste de travail sécurisé. Il contrôle l'accès à n'importe quel utilitaire et empêche les étudiants d'utiliser des ressources non autorisées.

MantisBT

Mantis est un outil Web de suivi des défauts facile à déployer, conçu pour faciliter le suivi des défauts des produits. Cela nécessite PHP, MySQL et un serveur Web. Découvrez nos services de démonstration et d'hébergement.

Listes Sec

SecLists est le compagnon ultime du testeur de sécurité. Il s'agit d'une collection de différents types de listes fréquemment utilisées lors des évaluations de sécurité, le tout en un seul endroit. SecLists contribue à rendre les tests de sécurité plus efficaces et productifs en fournissant facilement toutes les listes dont un testeur de sécurité pourrait avoir besoin. Les types de listes incluent les noms d'utilisateur, les mots de passe, les URL, les charges utiles floues, les modèles de données sensibles, les shells Web, etc. Le testeur peut simplement extraire ce référentiel sur une nouvelle machine de test et il aura accès à tous les types de listes dont il a besoin.

ZendStudio 13.5.1 Mac

Puissant environnement de développement intégré PHP

Afficher plus

Sujets chauds

Où se trouve l’entrée de connexion pour la messagerie Gmail ?

7500

Tutoriel CakePHP

1377

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

Afficher plus