Kommentar: In HTML5 denke ich, dass es das Wichtigste ist, Leinwand einzuführen, damit wir verschiedene Grafiken im Web zeichnen können, und Canvas ist eine pixelbasierte Zeichnung. Canvas ist ein HTML -Knoten, das einer Kunstkarte entspricht. Wir müssen mit JS zeichnen
In HTML5 denke ich, dass es das Wichtigste ist, Leinwand einzuführen, damit wir verschiedene Grafiken im Web zeichnen können. Es gibt den Menschen das Gefühl, in dieser Hinsicht ein wenig verschwommen zu sein. Im HTML5-Web gibt es auch XML-basierte Zeichnungen wie VML und SVG. Canvas ist eine pixelbasierte Zeichnung. Canvas ist ein HTML -Knoten, der einer Kunstboard entspricht, und wir müssen JS einziehen.wie folgt:
<canvas id = mycanvas width = 600 lhohe = 300> Ihr Browser unterstützt nicht die Definition </canvas>.
Wir können das Canvas -Objekt als var c = document.getElementById (mycanvas) erhalten; Die JS -Attributmethode sollte wie folgt aufgeführt werden:
1: Zeichnen Sie das gerenderte Objekt, C.GetContext (2D), erhalten Sie das 2D -Zeichnungsobjekt. Unabhängig davon, wie oft wir das Objekt nennen, ist das Objekt das gleiche Objekt.
2: Zeichenmethode:
Clecrect (links, oben, Breite, Höhe) löscht den definierten Rechteckbereich,
FILLRECTE (links, oben, Breite, Höhe) zeichnet das Rechteck und füllt es mit Fillstyle.
filtext (text, x, y) zeichnet Text;
Strokerect (links, oben, Breite, Höhe) zeichnet das Rechteck und zeichnet die Grenze mit Strokestyle.
beginPath (): Schalten Sie die Zeichnung des Pfades ein und setzen Sie den Pfad zum Ausgangszustand zurück;
Closepath (): Zeichnen Sie die Pfadspfadenden, zeichnet ein geschlossenes Intervall und fügt eine geschlossene Kurve aus der Startposition zur Stromkoordinate hinzu.
MoveTo (x, y): Stellen Sie die tatsächlichen Koordinaten der Zeichnung ein.
Lineto (x, y); Zeichnet eine gerade Linie von der aktuellen Position zu x, y.
fill (), stroke (), clip (): Die letzte Füll- und Grenzübersicht, die das Zeichnen, Clip -Bereich.
ARC (): Zeichnen Sie den Lichtbogen, die Mittelposition, den Startradian und das Ende Radian, um die Position und Größe des Bogens anzugeben;
rect (): rechteckiger Pfad;
Drawimage (Bild img): Bilder zeichnen;
quadratischcurveto (): quadratischer Spline -Pfad, Parameter zwei Kontrollpunkte;
BezierCurveto (): Bezier -Kurve, drei Kontrollpunkte von Parametern;
createImagedata, getImagedata, putimagedata: Ist die Pixeldaten in Leinwand. Imagedata ist die Datensatzbreite, Höhe und Datendaten, wobei Daten der Aufzeichnung unseres Pigments AS sind
Argb, so die Arraygrößenlänge ist Breite*Höhe*4 und die Reihenfolge ist RGBA. GetImagedata soll die rechteckigen Flächenpixel erhalten, und Putimagedata soll die rechteckigen Flächenpixel einstellen.
… und so weiter!
3: Koordinate Transformation:
Translate (x, y): Übersetzung, der Ursprung bewegt sich zu Koordinaten (x, y);
Drehen (a): Rotationstransformation, Rotationswinkel eines Grades;
Skala (x, y): Skalierungstransformation;
Save (), restore (): bietet und einen Stapel, speichern und wiederherstellen Sie den Zeichnungszustand, speichert den aktuellen Zeichenstatus in den Stapel, stellt den Stapel wieder her und stellt den Zeichenstatus wieder her.
… und so weiter!
Ok, es ist zu spät. Meinen Testcode angehängt:
<html>
<kopf>
</head>
<body>
<Canvas> Ihr Browser unterstützt es nicht </canvas>
<script type = "text/javaScript">
var Breite, Höhe, oben, links;
Breite = Höhe = 100;
ober = links = 5;
var x = 10;
var y = 10;
var c = document.getElementById ("mycanvas");
var maxwidth = c.width-5;
var maxHeight = C.Height-5;
var cxt = C.GetContext ("2D");
cxt.strokestyle = "#00f";
Cxt.Strokerect (0,0, C. Width, C.Height);
var img = new Image ();
img.src = "1.gif";
var myinterval = null;
Start();
Funktion refresh () {
CXT.ClearRect (links, oben, Breite, Höhe);
if ((links+x)> (maxwidth-width) || links+x <0) {
x = -x;
}
if ((oberst+y)> (maxheightheight) || top+y <0) {
y = -y;
}
links = links+x;
top = top+y;
cxt.drawimage (IMG, links, oben, Breite, Höhe);
cxt.font = "20pt Songyi";
CXT.FillText ("Breaking Wolf", links, Top+25);
}
Funktion start () {
if (myInterval == null) {
MyInterval = setInterval ("refresh ()", 100);
}
}
Funktion stop () {
if (myInterval! = null) {
ClearInterval (MyInterval);
MyInterval = null;
}
}
Funktion Inrectangle (x, y, rectx, recty, rwidth, rheight) {
return (x> = rectx && x <= rectx+rwidth) && (y> = recty && y <= recty+rheight)
}
c.onmouseover = Funktion (e) {
if (Inrectangle (e.clientx, e.clienty, links, oben, Breite, Höhe)) {
stoppen();
}
c.onmouseout = function (e) {
Start();
}
c.onmousemove = Funktion (e) {
if (Inrectangle (e.clientx, e.clienty, links, oben, Breite, Höhe)) {
if (myInterval! = null) {
stoppen();
}
}anders{
Start();
}
}
}
</script>
</body>
</html>