recherche

Maison  >  Article  >  interface Web  >  Conseils du didacticiel HTML5 CSS3 pour dessiner un rectangle déchiqueté_html5

Conseils du didacticiel HTML5 CSS3 pour dessiner un rectangle déchiqueté_html5

WBOY
WBOYoriginal
2016-05-16 15:45:492413parcourir

Récemment, j'ai partagé quelques connaissances qui, à mon avis, méritent d'être apprises en tapant Html5 Css3 et en les partageant avec tout le monde.

Comment dessiner un rectangle irrégulier : comme indiqué

Nous savons que Canvas peut être utilisé pour dessiner des graphiques. Canvas est une nouvelle balise qui apparaît en HTML5 et est utilisée pour dessiner des graphiques sur des pages Web.
Le rectangle irrégulier ci-dessus est dessiné avec de la toile.

Code d'implémentation :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >     
  2. <html lang="fr" >     
  3.     <tête>     
  4.         <méta charset="UTF- 8">     
  5.         <titre>锯齿图titre>     
  6.         <script type="text/ javascript">     
  7.         window.addEventListener("load", eventWindowLoaded, false);     
  8.         fonction eventWindowLoaded(){     
  9.             var x,y;     
  10.             var theCanvas = document.getElementById("canvas");     
  11.             var context = theCanvas.getContext("2d");     
  12.             context.StrokeStyle = '#CB9A61';      
  13.             context.lineWidth=10;     
  14.             context.StrokeRect(10,  10, theCanvas.width-20, theCanvas.height-20);     
  15.             context.fillStyle = "#FFFFFF";     
  16.             pour(x=5;x<=canvas.width;xx=x 10){     
  17.                 context.beginPath();     
  18.                 context.arc(x,5,5,0,Math.PI*2,true);     
  19.                 context.arc(x,canvas.height-5,5,0,Math.PI*2,true);     
  20.                 context.closePath();     
  21.                 context.fill();     
  22.             }     
  23.             pour(y=5;y<=canvas.height;yy=y 10){     
  24.                 context.beginPath();     
  25.                 context.arc(5,y,5,0,Math.PI*2,true);     
  26.                 context.arc(canvas.width-5,y,5,0,Math.PI*2,true);     
  27.                 context.closePath();     
  28.                 context.fill();     
  29.             }     
  30.         }     
  31.         script>     
  32.     tête>     
  33. <corps>     
  34.     <div style="position : absolu ;  haut :  100 px ;  gauche :  100 px;">     
  35.     <toile id="toile"  largeur="400" hauteur="170" haut=50px; gauche=50px;>     
  36.     div>     
  37. corps>     
  38. html>     

Comment écrire une forme comme celle-ci, un rectangle divisé en deux parties, séparées par une diagonale, deux couleurs. Comme le montre l'image :

Au début, l'idée était d'utiliser un div, de dessiner une barre oblique au milieu et de le diviser en deux parties avec deux couleurs. Cependant, elle n'a pas été mise en œuvre en raison de la faiblesse de la réception et des capacités limitées. a été pensé.

Utilisez trois divs, deux divs à gauche et à droite, et définissez la largeur et la hauteur. Cette partie joue en fait un rôle important :

En fait, c'est un rectangle divisé en deux triangles, et finalement l'effet ci-dessus est obtenu. En d’autres termes, il est si simple à mettre en œuvre et ne peut pas être suspendu à un arbre.

Le code est le suivant :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. > 
  2. <html lang="fr" > 
  4. <corps style="marge : 0 0 0 0;"> 
  5.  <div id="1" style="couleur de fond :#727171;largeur:50px;hauteur:20px;float:gauche" >div> 
  6.  <div id="2" style=" float:left;border-width:10px;border-color:#727171 #9fa0a0 #9fa0a0 #727171; border-style:solid">div> 
  7.  <div id="3" style="couleur de fond :#9fa0a0;largeur:50px;hauteur:20px;float:gauche" >div> 
  8. corps> 
  9. html> 

Le suivi continuera à résumer certaines connaissances sur HTML et CSS. Les connaissances à la réception peuvent paraître simples, mais il s'agit en fait d'un travail détaillé qui peut exercer sa patience. Du simple au complexe, du débutant à l'approfondi, améliorez-vous petit à petit.

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：Analyse complète des attributs standard et des attributs personnalisés dans les compétences du didacticiel HTML5_html5Article suivant：Analyse complète des attributs standard et des attributs personnalisés dans les compétences du didacticiel HTML5_html5

Articles Liés

Voir plus