recherche

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

WBOY
WBOYoriginal
2016-05-16 15:46:301721parcourir

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：
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：Implémenter la fonction de tremblement de WeChat basée sur les compétences du didacticiel html5 DeviceOrientation_html5Article suivant：Implémenter la fonction de tremblement de WeChat basée sur les compétences du didacticiel html5 DeviceOrientation_html5

Articles Liés

Voir plus