communauté
Apprendre
Bibliothèque d'outils
Outils d'IA
Loisirs
recherche
Français
Maison interface Web Tutoriel H5 Dessin sur toile HTML5 - Utilisez Canvas pour dessiner des graphiques et des didacticiels textuels Utilisez la toile HTML5 pour dessiner de belles images_html5 compétences du didacticiel

Dessin sur toile HTML5 - Utilisez Canvas pour dessiner des graphiques et des didacticiels textuels Utilisez la toile HTML5 pour dessiner de belles images_html5 compétences du didacticiel

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 03:46 PM

HTML5 est très populaire. Récemment, j'ai eu l'idée d'utiliser des fonctions liées au HTML, je devrais donc l'apprendre attentivement.

Après avoir examiné attentivement les fonctions de Canvas, j'ai l'impression que HTML5 devient de plus en plus fonctionnel dans l'interaction côté client. Aujourd'hui, j'ai jeté un œil au dessin Canvas. Voici quelques exemples. utiliser.

1. Utilisez Canvas pour tracer une ligne droite :



Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >  
  2. <html>  
  3.     <tête>  
  4.         <méta charset="UTF- 8">  
  5.     tête>  
  6.     <style type="texte/ css">  
  7.         toile{border:dashed 2px #CCC}   
  8.     style>  
  9.     <script type="texte/ javascript">  
  10.         fonction $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         fonction pageLoad(){   
  14.             var can = $$('can');   
  15.             var cancans = can.getContext('2d');   
  16.             cans.moveTo(20,30);//第一个起点   
  17.             cans.lineTo(120,90);//第二个点   
  18.             cans.lineTo(220,60);//第三个点（以第二个点为起点）   
  19.             cans.lineWidth=3;   
  20.             cans.StrokeStyle = 'rouge';   
  21.             cans.Stroke();   
  22.         }
  23.  script> 
  24.  <corps onload="pageLoad( );">
  25.  <toile id="peut" largeur="400px" hauteur="300px">4toile>
  26.  corps> 
  27. html>

Les deux méthodes API utilisées ici, moveTo et lineTo sont respectivement les coordonnées du point de départ et du point final du segment de ligne, les variables sont (coordonnée X, coordonnée Y), StrokeStyle et Stroke respectivement le style de dessin du chemin et le chemin du dessin.

2. Tracez des lignes de dégradé

Les lignes de dégradé ont un effet de dégradé de couleur Bien entendu, le style de dégradé peut suivre ou non la direction du chemin :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >  
  2. <html>  
  3.     <tête>  
  4.         <méta charset="UTF- 8">  
  5.     tête>  
  6.     <style type="texte/ css">  
  7.         toile{border:dashed 2px #CCC}   
  8.     style>  
  9.     <script type="texte/ javascript">  
  10.         fonction $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         fonction pageLoad(){   
  14.             var can = $$('can');   
  15.             var cancans = can.getContext('2d');   
  16.             cans.moveTo(0,0);   
  17.             cans.lineTo(400 300);   
  18.             var gnt1 = cans.createLinearGradient(0,0,400,300);//线性渐变的起止坐标   
  19.             gnt1.addColorStop(0,'red');//创建渐变的开始颜色，0表示偏移量，个人理解为直线上的相对位置，最大为1，一个渐变中可以写任意个渐变颜色   
  20.             gnt1.addColorStop(1,'jaune');   
  21.             cans.lineWidth=3;   
  22.             cans.StrokeStyle = gnt1;   
  23.             cans.Stroke();   
  24.         }
  25.  script> 
  26.  <corps onload="pageLoad( );">
  27.  <toile id="peut" largeur="400px" hauteur="300px">4toile>
  28.  corps> 
  29. html>

3. Dessinez un rectangle ou un carré :

Si vous utilisez HTML4, ce type de cadre rectangulaire ne peut être généré qu'à l'aide du code d'arrière-plan. Désormais, la fonction Canvas fournie par HTML5 peut être facilement dessinée, les avantages de HTML5 sont donc assez élevés.

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >  
  2. <html>  
  3.     <tête>  
  4.         <méta charset="UTF- 8">  
  5.     tête>  
  6.     <style type="texte/ css">  
  7.         toile{border:dashed 2px #CCC}   
  8.     style>  
  9.     <script type="texte/ javascript">  
  10.         fonction $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         fonction pageLoad(){   
  14.             var can = $$('can');   
  15.             var cancans = can.getContext('2d');   
  16.             cans.fillStyle = 'jaune';   
  17.             cans.fillRect(30,30,340,240);   
  18.         }   
  19.     script>  
  20.     <corps onload="pageLoad( );">  
  21.         <toile id="peut"  largeur="400px" hauteur="300px">4toile>   
  22.     corps>  
  23. html>  

Une méthode est utilisée ici - fillRect(). D'après le sens littéral, vous pouvez savoir qu'il s'agit de remplir un rectangle. Les paramètres ici méritent d'être expliqués. les mêmes que les coordonnées en mathématiques. Idem, veuillez consulter

pour plus de détails.

Les X et Y ici partent du point de départ par rapport au coin supérieur gauche du canevas, rappelez-vous ! !

4. Dessinez une simple boîte rectangulaire

L'exemple ci-dessus parle de dessiner un bloc rectangulaire et de le remplir de couleur. Cet exemple dessine simplement un rectangle sans réaliser l'effet de remplissage.

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >  
  2. <html>  
  3.     <tête>  
  4.         <méta charset="UTF- 8">  
  5.     tête>  
  6.     <style type="texte/ css">  
  7.         toile{border:dashed 2px #CCC}   
  8.     style>  
  9.     <script type="texte/ javascript">  
  10.         fonction $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         fonction pageLoad(){   
  14.             var can = $$('can');   
  15.             var cancans = can.getContext('2d');   
  16.             cans.StrokeStyle = 'rouge';   
  17.             cans.StrokeRect(30,30,340,240);   
  18.         }   
  19.     script>  
  20.     <corps onload="pageLoad( );">  
  21.         <toile id="peut"  largeur="400px" hauteur="300px">4toile>   
  22.     corps>  
  23. html>  
  24.   

C'est très simple, tout comme l'exemple ci-dessus, remplacez simplement le remplissage par un trait. Voir l'exemple ci-dessus pour plus de détails.

5. Dessinez un rectangle avec un dégradé linéaire

Le dégradé est un très bon effet de remplissage. En combinant l'exemple 2 et l'exemple 3, nous pouvons créer un rectangle dégradé

.

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >  
  2. <html>  
  3.     <tête>  
  4.         <méta charset="UTF- 8">  
  5.     tête>  
  6.     <style type="texte/ css">  
  7.         toile{border:dashed 2px #CCC}   
  8.     style>  
  9.     <script type="texte/ javascript">  
  10.         fonction $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         fonction pageLoad(){   
  14.             var can = $$('can');   
  15.             var cancans = can.getContext('2d');   
  16.             var gnt1 = cans.createLinearGradient(10,0,390,0);   
  17.             gnt1.addColorStop(0,'red');   
  18.             gnt1.addColorStop(0.5,'vert');   
  19.             gnt1.addColorStop(1,'bleu');   
  20.             cans.fillStyle = gnt1;   
  21.             cans.fillRect(10,10,380,280);   
  22.         }
  23.  script> 
  24.  <corps onload="pageLoad( );">
  25.  <toile id="peut" largeur="400px" hauteur="300px">4toile>
  26.  corps> 
  27. html>

Pas besoin d'expliquer, rappelez-vous simplement fillRect(X,Y,Width,Height).

6. Remplissez un cercle


Les formes circulaires sont largement utilisées, notamment les ovales.

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >  
  2. <html>  
  3.     <tête>  
  4.         <méta charset="UTF- 8">  
  5.     tête>  
  6.     <style type="texte/ css">  
  7.         toile{border:dashed 2px #CCC}   
  8.     style>  
  9.     <script type="texte/ javascript">  
  10.         fonction $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         fonction pageLoad(){   
  14.             var can = $$('can');   
  15.             var cancans = can.getContext('2d');   
  16.             cans.beginPath();   
  17.             cans.arc(200,150,100,0,Math.PI*2,true);   
  18.             cans.closePath();   
  19.             cans.fillStyle = 'vert';//本来这里最初使用的是red，截图一看，傻眼了，怕上街被爱国者打啊，其实你懂的~~   
  20.             cans.fill();   
  21.         }
  22.  script> 
  23.  <corps onload="pageLoad( );">
  24.  <toile id="peut" largeur="400px" hauteur="300px">4toile>
  25.  corps> 
  26. html>

L'utilisation de la méthode arc ici est arc(X,Y,Radius,startAngle,endAngle,antihoraire), ce qui signifie (coordonnée X du centre du cercle, coordonnée Y du centre du cercle, rayon, angle de départ (radians), angle de fin radian, que ce soit selon Draw dans le sens des aiguilles d'une montre);

Comparaison des paramètres en arc :

a.cans.arc(200,150,100,0,Math.PI,true);

c, cans.arc(200,150,100,0,Math.PI/2,true);

c, cans.arc(200,150,100,0,Math.PI/2,true);

d, cans.arc(200,150,100,0,Math.PI/2,false);

7. Bloc circulaire

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >  
  2. <html>  
  3.     <tête>  
  4.         <méta charset="UTF- 8">  
  5.     tête>  
  6.     <style type="texte/ css">  
  7.         toile{border:dashed 2px #CCC}   
  8.     style>  
  9.     <script type="texte/ javascript">  
  10.         fonction $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         fonction pageLoad(){   
  14.             var can = $$('can');   
  15.             var cancans = can.getContext('2d');   
  16.             cans.beginPath();   
  17.             cans.arc(200,150,100,0,Math.PI*2,false);   
  18.             cans.closePath();   
  19.             cans.lineWidth = 5;   
  20.             cans.StrokeStyle = 'rouge';   
  21.             cans.Stroke();   
  22.         }
  23.  script> 
  24.  <corps onload="pageLoad( );">
  25.  <toile id="peut" largeur="400px" hauteur="300px">4toile>
  26.  corps> 
  27. html>

Je ne l'expliquerai pas ici. Comme dans l'exemple ci-dessus, lineWidth contrôle la largeur de la ligne.

8. Dégradé circulaire

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >  
  2. <html>  
  3.     <tête>  
  4.         <méta charset="UTF- 8">  
  5.     tête>  
  6.     <style type="texte/ css">  
  7.         toile{border:dashed 2px #CCC}   
  8.     style>  
  9.     <script type="texte/ javascript">  
  10.         fonction $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         fonction pageLoad(){   
  14.             var can = $$('can');   
  15.             var cancans = can.getContext('2d');   
  16.             var gnt = cans.createRadialGradient(200,300,50,200,200,200);   
  17.             gnt.addColorStop(1,'red');   
  18.             gnt.addColorStop(0,'green');   
  19.             cans.fillStyle = gnt;   
  20.             cans.fillRect(0,0,800,600);   
  21.         }
  22.  script> 
  23.  <corps onload="pageLoad( );">
  24.  <toile id="peut" largeur="800px" hauteur="600px">4toile>
  25.  corps> 
  26. html>

Ce qu'il faut expliquer ici c'est la méthode createRadialGradient, les paramètres sont (Xstart, Ystart, radiusStart, XEnd, YEnd, radiusEnd), c'est-à-dire que lorsqu'elle implémente le dégradé, elle utilise deux cercles, l'un est le cercle d'origine et l'autre C'est un cercle dégradé. En fait, cette méthode de contrôle des coordonnées et du rayon peut réaliser de nombreux styles, tels que

.

Cercle tridimensionnel

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. var gnt = cans.createRadialGradient(200,150,0,200,50,250 );
  2. gnt.addColorStop(0,'red');
  3. gnt.addColorStop(1,'#333');
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

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)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
4 Il y a quelques semaines By DDD
R.E.P.O. Enregistrer l'emplacement du fichier: où est-il et comment le protéger?
4 Il y a quelques semaines By DDD
Musée à deux points: toutes les expositions et où les trouver
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Afficher plus

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

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

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?
7369
15
Tutoriel Java
1628
14
Tutoriel CakePHP
1355
52
Tutoriel Laravel
1266
25
Tutoriel PHP
1215
29
Afficher plus
Related knowledge
Comment ajouter de l'audio à mon site Web HTML5? Comment ajouter de l'audio à mon site Web HTML5? Mar 10, 2025 pm 03:01 PM

Cet article explique comment intégrer l'audio dans HTML5 en utilisant l'AUDIO & GT; Element, y compris les meilleures pratiques pour la sélection du format (MP3, Ogg Vorbis), l'optimisation des fichiers et le contrôle JavaScript pour la lecture. Il met l'accent sur l'utilisation de plusieurs audio F

Comment utiliser les balises META de la fenêtre pour contrôler la mise à l'échelle des pages sur les appareils mobiles? Comment utiliser les balises META de la fenêtre pour contrôler la mise à l'échelle des pages sur les appareils mobiles? Mar 13, 2025 pm 08:00 PM

L'article discute de l'utilisation de balises Meta pour contrôler la mise à l'échelle des pages sur les appareils mobiles, en se concentrant sur des paramètres tels que la largeur et l'échelle initiale pour une réactivité et des performances optimales. COMMANDE: 159

Comment gérer la confidentialité de l'emplacement de l'utilisateur et les autorisations avec l'API Geolocation? Comment gérer la confidentialité de l'emplacement de l'utilisateur et les autorisations avec l'API Geolocation? Mar 18, 2025 pm 02:16 PM

L'article traite de la gestion de la confidentialité de l'emplacement des utilisateurs et des autorisations à l'aide de l'API Geolocation, mettant l'accent sur les meilleures pratiques pour demander des autorisations, assurer la sécurité des données et se conformer aux lois sur la confidentialité.

Comment utiliser l'API de visibilité de la page HTML5 pour détecter quand une page est visible? Comment utiliser l'API de visibilité de la page HTML5 pour détecter quand une page est visible? Mar 13, 2025 pm 07:51 PM

L'article discute de l'utilisation de l'API de visibilité de la page HTML5 pour détecter la visibilité de la page, améliorer l'expérience utilisateur et optimiser l'utilisation des ressources. Les aspects clés comprennent la pause des supports, la réduction de la charge du processeur et la gestion de l'analyse en fonction des changements de visibilité.

Comment utiliser les formulaires HTML5 pour la saisie de l'utilisateur? Comment utiliser les formulaires HTML5 pour la saisie de l'utilisateur? Mar 10, 2025 pm 02:59 PM

Cet article explique comment créer et valider les formulaires HTML5. Il détaille le & lt; formulaire & gt; élément, types d'entrée (texte, e-mail, numéro, etc.) et attributs (requis, modèle, min, max). Les avantages des formes HTML5 sur les méthodes plus anciennes, incl

Comment créer des jeux interactifs avec HTML5 et JavaScript? Comment créer des jeux interactifs avec HTML5 et JavaScript? Mar 10, 2025 pm 06:34 PM

Cet article détaille la création de jeux HTML5 interactifs à l'aide de JavaScript. Il couvre la conception de jeux, la structure HTML, le style CSS, la logique JavaScript (y compris la gestion des événements et l'animation) et l'intégration audio. Bibliothèques JavaScript essentielles (Phaser, Pi

Comment utiliser l'API HTML5 glisser-déposer pour les interfaces utilisateur interactives? Comment utiliser l'API HTML5 glisser-déposer pour les interfaces utilisateur interactives? Mar 18, 2025 pm 02:17 PM

L'article explique comment utiliser l'API HTML5 Drag and Drop pour créer des interfaces utilisateur interactives, détaillant les étapes pour rendre les éléments dragables, gérer les événements clés et améliorer l'expérience utilisateur avec des commentaires personnalisés. Il discute également des pièges communs à un

Comment utiliser l'API HTML5 WebSockets pour la communication bidirectionnelle entre le client et le serveur? Comment utiliser l'API HTML5 WebSockets pour la communication bidirectionnelle entre le client et le serveur? Mar 12, 2025 pm 03:20 PM

Cet article explique l'API HTML5 WebSockets pour la communication client-serveur bidirectionnelle en temps réel. Il détaille les implémentations côté client (JavaScript) et côté serveur (Python / Flask), résolvant des défis tels que l'évolutivité, la gestion de l'état, un

See all articles