Heim > Web-Frontend > H5-Tutorial > Zusammenfassung der HTML5-Grundkenntnisse

Zusammenfassung der HTML5-Grundkenntnisse

大家讲道理
Freigeben: 2016-11-09 11:54:22
Original
1315 Leute haben es durchsucht

1. Leinwandzeichnung

Schritte

  • Leinwandelement hinzufügen, ID und Bereich definieren

  • Leinwand in js abrufen Elemente

  • erhalten die 2D-Zeichenumgebung über die Methode getContext()

  • zeichnen Grafiken über verschiedene Funktionen

Koordinatenpositionierung

  • Die Zeichnungspositionierung basiert auf der oberen linken Ecke der Leinwand als (0,0)-Ursprung

Zeichne eine gerade Linie

  • moveTo(): ​​​​gibt den Startpunkt an

  • lineTo(): ​​​​zeichnet eine gerade Linie vom Startpunkt zu den angegebenen Koordinaten

  • Stroke(): implementiert die Funktion zum Zeichnen einer geraden Linie

  • fill(): implementiert die Füllfunktion

Beispiel: Zeichne ein Dreieck

HTML-Code

<body> <canvas id="canvas"></canvas> </body>
Nach dem Login kopieren

JS-Code

window.onload = function(){ var canvas = document.getElementById("canvas");
  canvas.width = 800;
  canvas.height = 800; var context  = canvas.getContext(&#39;2d&#39;);
  context.strokeStyle = "red";
  context.moveTo(100, 100);
  context.lineTo(200, 100);
  context.lineTo(150,50);
  context.lineTo(100,100);
  context.stroke();
};
Nach dem Login kopieren

Zusammenfassung der HTML5-Grundkenntnisse

Rechteck zeichnen

  • fillStyle(): Legt die Füllfarbe des Rechtecks ​​fest.

  • fillRect(x,y,width,height).

  • StrokeStyle(): Legt die Umrissfarbe des Rechtecks ​​fest.

  • StrokeRect(x,y,width,height).

Zeichnen Sie einen Kreis (Bogen)

  • beginPath(): Beginnen Sie mit dem Zeichnen der Route

  • arc(x,y,radius,startAngle,endAngle,gegen den Uhrzeigersinn)
    Legen Sie den Mittelpunkt, den Radius, den Startwinkel, den Endwinkel und die Zeichenrichtung des Zeichnens fest.

Bezier-Kurve

Quadratische Bezier-Kurve

  • quadraticCurveTo(cp1x,cp1y,x,y)
    cp1x, cp1y repräsentiert die Koordinaten eines Kontrollpunkts; x, y repräsentiert die Koordinaten des Endpunkts.

Kubische Bezier-Kurve

  • bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
    cp1x,cp1y und cp2x und cp2y repräsentieren jeweils
    zwei Kontrollpunkte.

Beispiel 1: Zeichne einen fünfzackigen Stern

window.onload = function() { var canvas = document.getElementById("canvas"); var context = canvas.getContext(&#39;2d&#39;);
    drawStar(context, 120, 120, 80, 30, 10, "yellow", 0);
} function drawStar(context, x, y, R, r, width, color, rotation) {
    context.beginPath(); for (var i = 0; i < 5; i++) {
        context.lineTo(Math.cos((18 + i * 72 - rotation) / 180 * Math.PI) * R + x, -Math.sin((18 + i * 72 - rotation) / 180 * Math.PI) * R + y);
        context.lineTo(Math.cos((54 + i * 72 - rotation) / 180 * Math.PI) * r + x, -Math.sin((54 + i * 72 - rotation) / 180 * Math.PI) * r + y);
    }
    context.closePath();
    context.lineWidth = width;
    context.fillStyle = color;
    context.fill();
}
Nach dem Login kopieren

Zusammenfassung der HTML5-Grundkenntnisse

Beispiel 2: Zeichne das BMW-Logo

window.onload = function() { var canvas = document.getElementById("canvas");
    canvas.width = 800;
    canvas.height = 800; var context = canvas.getContext(&#39;2d&#39;); //圆心坐标x,y  内圆半径r  外圆半径R var x = 100; var y = 100; var r = 100; var R = r + 50; var colors = Array("#87CEFA", "#FAFAFA", "#000");
    context.beginPath();
    context.translate(100, 100);
    context.arc(x, y, R, 0, Math.PI * 2);
    line_gra = context.createLinearGradient(-10, -10,20, 50);
    line_gra.addColorStop(0, "#ddd");
    line_gra.addColorStop(1, "#262626");
    context.lineWidth = 3;
    context.strokeStyle = "#000";
    context.fillStyle = line_gra;
    context.closePath();
    context.stroke();
    context.fill();
    drawBigRound(context, x, y, r, 53, "#ADD8E6", 7);
    drawBm(context, x, y, r, colors);
    drawBigRound(context, x, y, r, 3, "#9FB6CD", 5);
    context.beginPath();
    context.fillStyle = "#fff";
    context.font = "bold 40px verdana";
    context.fillText("M", 80, -10);
    context.rotate(Math.PI / 6);
    context.fillText("W", 125, -75);
    context.rotate(-(Math.PI / 2));
    context.fillText("B", 0, 35);
    context.restore();
} function drawBm(context, x, y, r, colors) { var color; for (var i = 0; i < 4; i++) {
        context.beginPath();
        context.moveTo(x, y);
        context.arc(x, y, r, Math.PI * i / 2, Math.PI * (i + 1) / 2); if (i == 0 || i == 2) {
            color = colors[0];
        } else {
            color = colors[1];
        }
        context.fillStyle = color;
        context.lineWidth = 2;
        context.strokeStyle = colors[2];
        context.closePath();
        context.fill();
        context.stroke();
    }
} function drawBigRound(context, x, y, r, addr, color, lineWidth) {
    context.beginPath();
    context.arc(x, y, r + addr, 0, Math.PI * 2);
    context.lineWidth = lineWidth;
    context.strokeStyle = color;
    context.closePath();
    context.stroke();
}
Nach dem Login kopieren

Zusammenfassung der HTML5-Grundkenntnisse

2.CSS3 Shadow Box-Shadow

Box-Shadow: H-Shadow V-Shadow Blur Farbeinsatz verteilen ;

  • H-Schatten erforderlich. Die Position des horizontalen Schattens. Negative Werte sind erlaubt.

  • V-Shadow erforderlich. Die Position des vertikalen Schattens. Negative Werte sind erlaubt.

  • unschärfe Optional. Unscharfe Distanz.

  • Spread Optional. Die Größe des Schattens.

  • Farbe optional. Die Farbe des Schattens. Siehe CSS-Farbwerte.

  • Einsatz optional. Ändern Sie den äußeren Schatten (Anfang) in den inneren Schatten.

3.CSS3-Transformationsattribut

transform: none|transform-functions;

  • transform :rotate(): Drehung, Grad bedeutet Grad

transform: rotate(-10deg);
Nach dem Login kopieren
  • transform:skew(): Neigung

transform:skew(20deg);
Nach dem Login kopieren
  • transform:scale(): Skalierung, 2-fach in x-Richtung, 1,5-fach in y-Richtung

transform: scale(2, 1.5);
Nach dem Login kopieren
  • transformation :translate(): Übersetzung, 120 Pixel in x-Richtung, 10 Pixel in y-Richtung

transform:translate(120px,10px);
Nach dem Login kopieren

4. CSS3-Übersetzungseigenschaft

Übergang: Zeitdauer der Eigenschaft Funktionsverzögerung ;

  • transition-property gibt den Namen der CSS-Eigenschaft an, die den Übergangseffekt festlegt.

  • transition-duration gibt an, wie viele Sekunden oder Millisekunden es dauert, bis der Übergangseffekt abgeschlossen ist.

  • transition-timing-function 规定速度效果的速度曲线。

  • transition-delay 定义过渡效果何时开始。

div { width:100px; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ }
Nach dem Login kopieren


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage