Maison > interface Web > Tutoriel H5 > HTML5 utilise la méthode drawImage() pour dessiner des images_html5 conseils du didacticiel

HTML5 utilise la méthode drawImage() pour dessiner des images_html5 conseils du didacticiel

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Libérer: 2016-05-16 15:47:34
original
2022 Les gens l'ont consulté

1. Dessinez une image

Utilisez la méthode drawImage() pour dessiner une image. L'environnement de dessin propose trois versions différentes de cette méthode.
drawImage(image,x,y) : dessinez l'image en (x,y) dans le canevas.
drawImage(image,x,y,width,height) : dessinez l'image à (x,y) dans le canevas et redimensionnez-la à la largeur et à la hauteur spécifiées.
drawImage (image, source Et dessinez-le en (x,y) dans le canevas.

2. Balise

Avant de dessiner l'image, vous devez charger l'image dans le navigateur. Ici, nous ajoutons simplement une balise après la balise canvas.



3. Dessinez des images

Copiez le code
Le code est le suivant :

>
HTML5 /javascript" charset = "utf-8">
//Cette fonction sera appelée une fois la page complètement chargée.
function pageLoaded()
{
//Obtenir une référence au Notez que le nom du tCanvas doit être le même que celui-ci. Les identifiants dans le corps sont les mêmes
var canvas = document.getElementById('tCanvas'); canvas
var context = canvas.getContext('2d');
//Obtenir la référence de l'objet image
var image = document.getElementById('tkjpg'); image à (0,50)
context.drawImage(image,0,50)
//Réduire l'image à la moitié de sa taille d'origine
context.drawImage(image,200,50,165/2,86); /2);
//Dessiner une partie de l'image (couper 0,7 à partir du coin supérieur gauche de l'image) )
context.drawImage(image,0,0,0.7*165,0.7*86,300,70, 0,7*165,0,7*86);
}
/head>
canvas width = "500" height = "200" id = "tCanvas" style = "border:black 1px solid >

Conseils : Votre navigateur ne prend pas en charge la balise

>



4. Effet de dessin


5.
Étiquettes associées:
Déclaration de ce site Web
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
Derniers numéros
validation html5 pour symfony 2.1
Depuis 1970-01-01 08:00:00
0
0
0
La différence entre HTML et HTML5
Depuis 1970-01-01 08:00:00
0
0
0
html5 afficher masquer
Depuis 1970-01-01 08:00:00
0
0
0
Concernant l'utilisation de html5
Depuis 1970-01-01 08:00:00
0
0
0
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal