简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  HTML5 CSS3-Tutorial-Tipps zum Zeichnen von gezackten Rechtecken_html5

HTML5 CSS3-Tutorial-Tipps zum Zeichnen von gezackten Rechtecken_html5

WBOY
WBOYOriginal
2016-05-16 15:45:492408Durchsuche

Kürzlich habe ich einige Kenntnisse geteilt, die meiner Meinung nach lernenswert sind, indem ich Html5 Css3 eingetippt und mit allen geteilt habe.

So zeichnen Sie ein gezacktes Rechteck: wie gezeigt

Wir wissen, dass Canvas zum Zeichnen von Grafiken verwendet werden kann. Canvas ist ein neues Tag, das in HTML5 erscheint und zum Zeichnen von Grafiken auf Webseiten verwendet wird.
Das gezackte Rechteck oben wurde mit Leinwand gezeichnet.

Implementierungscode:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >     
  2. <html lang="en" >     
  3.     <Kopf>     
  4.         <meta charset="UTF- 8">     
  5.         <Titel>锯齿图Titel>     
  6.         <Skript Typ="text/ Javascript">     
  7.         window.addEventListener("load", eventWindowLoaded, false);     
  8.         function 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.             for(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.             for(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.         Skript>     
  32.     Kopf>     
  33. <Körper>     
  34.     <div Stil="Position: absolut; oben: 100px; links: 100px;">     
  35.     <canvas id="canvas"  Breite="400" Höhe="170" oben=50px; links=50px;>     
  36.     div>     
  37. Körper>     
  38. html>     

Wie schreibt man eine Form wie diese, ein Rechteck, das in zwei Teile geteilt ist, getrennt durch eine diagonale Linie, zwei Farben. Wie im Bild gezeigt:

Zuerst bestand die Idee darin, ein Div zu verwenden, einen Schrägstrich in die Mitte zu zeichnen und es mit zwei Farben in zwei Teile zu unterteilen. Aufgrund der schwachen Front und der begrenzten Möglichkeiten wurde dies jedoch nicht umgesetzt wurde gedacht.

Verwenden Sie drei Divs, zwei Divs links und rechts, und legen Sie die Breite und Höhe fest. Dieser Teil spielt tatsächlich eine wichtige Rolle:

Tatsächlich handelt es sich um ein in zwei Dreiecke geteiltes Rechteck, und schließlich wird der obige Effekt erzielt. Anders ausgedrückt: Es ist so einfach umzusetzen und kann nicht an einen Baum gehängt werden.

Der Code lautet wie folgt:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. > 
  2. <html lang="en" > 
  4. <Körper Stil="margin: 0 0 0 0;"> 
  5.  <div id="1" Stil="background-color:#727171;width:50px;height:20px;float:left" >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" Stil="background-color:#9fa0a0;width:50px;height:20px;float:left" >div> 
  8. Körper> 
  9. html> 

Im Folgenden werden weiterhin einige Kenntnisse über HTML und CSS zusammengefasst. Das Wissen an der Rezeption mag einfach erscheinen, aber es ist tatsächlich eine detaillierte Aufgabe, die die Geduld strapazieren kann. Von einfach bis komplex, von Anfänger bis tiefgründig – verbessern Sie sich nach und nach.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Umfassende Analyse von Standardattributen und benutzerdefinierten Attributen in HTML5_html5-Tutorial-FähigkeitenNächster Artikel：Umfassende Analyse von Standardattributen und benutzerdefinierten Attributen in HTML5_html5-Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen