Este ejemplo de artículo describe el método de dibujar patrones elípticos de JS+HTML5. El lienzo HTML5 no tiene un método de dibujar elípticos. El siguiente código puede dibujar elípticos. Se comparte con usted para su referencia. El método de implementación específico es el siguiente:
1. En un lienzo implícito (defina su CSS como: Pantalla: Ninguno;).
2. Dibuja la imagen del lienzo implícito con diferentes relaciones de aspecto en otro lienzo explícito para convertir el jardín en una elipse.
3. Además, agregue la función de animación.
<html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> Test Color Fondo </title> <script> var ticker = 0; var col = nuevo Array ("#000000", "#a52a2a", "#b8860b", "rosa", "verde", "amarillo", "rojo", "naranja", "#bb008b", "#8b0000"); functionenrawbackground () {var canvashide = document.getElementById ("ocultar"); // Canvas oculto var g = canvashide.getContext ("2d"); // Descubre el cepillo del lienzo oculto ocultar g.Clearrect (0,0,1200,800); // Limpie el lienzo oculto var i = 0; do {// dibuja el jardín donde diferentes colores son concéntricos y divergentes en secuencia g.beginpath (); 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]); g.fillstyle = grd; g.arc (300,300,300-i*25,0,2*math.pi); g.fill (); i ++;} mientras (i <11); // Encuentre el pincel del lienzo explícito mycanvas gg var gg = document.getElementById ("mycanvas"). GetContext ("2d"); gg.clearrect (0,0, mycanvas.width, mycanvas.height); // Limpie el lienzo explícito/ * Dibuje la imagen del jardín del lienzo implícito con una escala de 600 ancho y 300 altura, * dibuje al lienzo explícito mycanvas, * como resultado, la imagen del jardín del lienzo implícito con una elipse en el lienzo explícito */gg.drawimage (canvashide, 0,0,0,0,600,300,300); Ticker ++;} function preparation () {setInterval ('shardbackground ()', 1000); } </script> <style> #mycanvas {posición: absoluto; Izquierda: 0px; arriba: 0px;}#hide {display: none;} </style> </head> <body onload = "preparation ()"> <Canvas id = "mycanvas"> </ Canvas> <Canvas id = "escondite"> </ Canvas> </body> </html>Espero que este artículo sea útil para la programación web de todos.