Maison > interface Web > Tutoriel H5 > le corps du texte

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

WBOY
Libérer: 2016-05-16 15:45:49
original
2414 Les gens l'ont consulté

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=50pxgauche=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" > 
  3. <corps style="marge : 0 0 0 0;"> 
  4.  <div id="1" style="couleur de fond :#727171;largeur:50px;hauteur:20px;float:gauche" >div> 
  5.  <div id="2" style=" float:left;border-width:10px;border-color:#727171 #9fa0a0 #9fa0a0 #727171; border-style:solid">div> 
  6.  <div id="3" style="couleur de fond :#9fa0a0;largeur:50px;hauteur:20px;float:gauche" >div> 
  7. corps> 
  8. 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.

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal