In diesem Artikel wird die Methode zum Zeichnen elliptischer Muster durch JS+HTML5 beschrieben. HTML5 -Canvas hat keine Methode zum Zeichnen von Elliptikern. Der folgende Code kann Ellipse zeichnen. Es wird Ihnen als Referenz mit Ihnen geteilt. Die spezifische Implementierungsmethode lautet wie folgt:
1. Auf einer impliziten Leinwand (Definieren Sie seine CSS als: Anzeige: keine;).
2. Zeichnen Sie das Bild der impliziten Leinwand mit unterschiedlichen Seitenverhältnissen auf einer anderen expliziten Leinwand, um den Garten in eine Ellipse zu verwandeln.
3. Außerdem fügen Sie die Animationsfunktion hinzu.
<html> <head> <meta http-äquiv = "content-type" content = "text/html; charSet = utf-8"/> <titels> testen Farbhintergrund </title> <cript> var ticker = 0; var col = new Array ("#000000", "#a52a2a", "#b8860b", "pink", "grün", "gelb", "rot", "orange", "#bb008b", "#8b0000"); function nraybackground () {var canvashide = document.getElementById ("hide"); // versteckte Canvas var g = canvashide.getContext ("2d"); // Finden Sie die Bürste der versteckten Leinwand heraus, die G g G.Clearrect (0,0,1200,800) ausblenden; // Die versteckte Leinwand putzen var i = 0; do {// den Garten zeichne, in dem verschiedene Farben in Sequenz G. ebeginPath () konzentrisch und unterschiedlich sind; var grd = g.createradialgradient (300.300.300-i*25, 300.300,265-i*25); grd.addcolorstop (0, col [(0+i+Ticker)%col.Length]); grd.addcolorstop (1, col [((((() 1+i+Ticker)%col.length]); während (i <11); // Finden Sie die Pinsel der expliziten Leinwand mycanvas gg var gg = document.getElementById ("mycanvas"). GetContext ("2d"); gg.clearrect (0,0, mycanvas.width, mycanvas.height); // Die explizite Leinwand reinigen/ * Zeichnen Sie das Gartenbild der impliziten Leinwand mit einer Skala von 600 Breite und 300 Höhe. Ticker ++;} Funktion präparation () {setInterval ('Drawbackground ()', 1000); } </script> <style> #mycanvas {Position: absolut; links: 0px; Oben: 0px;}#Hide {Anzeige: Keine;} </style> </head> <body onload = "prepation ()"> <canvas id = "mycanvas"> </canvas> <canvas id = "hide"> </canvas> </body> </html>Ich hoffe, dieser Artikel wird für die Webprogrammierung aller hilfreich sein.