Cet exemple d'article décrit la méthode de dessin de motifs elliptiques par JS + HTML5. HTML5 Canvas n'a pas de méthode de dessin elliptique. Le code suivant peut dessiner des elliptiques. Il est partagé avec vous pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
1. Sur une toile implicite (définissez son CSS comme: Affichage: Aucun;).
2. Dessinez l'image de la toile implicite avec différents rapports d'aspect sur une autre toile explicite pour transformer le jardin en ellipse.
3. De plus, ajoutez la fonction d'animation.
<html> <éadfride> <méta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <ititle> fond de couleur de test </title> <prissé> var bicker = 0; var col = new Array ("# 000000", "# a52a2a", "# b8860b", "rose", "vert", "jaune", "rouge", "orange", "# bb008b", "# 8b0000"); fonction daponomaire () {var canVashide = document.getElementyId ("masquer"); // Canvas caché var g = canvashide.getContext ("2d"); // découvrez la brosse de la toile cachée masquer G G.Clearrect (0,0,1200,800); // nettoie la toile cachée var i = 0; do {// dessiner le jardin où différentes couleurs sont concentriques et divergentes en séquence g.beginpath (); var grd = g.creareadialgradient (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 ++;} tandis que (i <11); // Découvrez le pinceau du canevas explicite MyCanvas gg var gg = document.getElementByid ("myCanvas"). GetContext ("2d"); gg.clearrect (0,0, myCanvas.Width, myCanvas.height); // Nettoyez la toile explicite / * Dessinez l'image du jardin de la toile implicite avec une échelle de 600 largeurs et 300 hauteur, * dessinez sur la toile explicite MyCanvas, * En conséquence, l'image du jardin de la toile implicite avec une allipse sur la toile explicite MyCanvas * / gg.Drewimage (Canvashide, 0,600,300); Ticker ++;} fonction Preperation () {setInterval ('Doontrackground ()', 1000); } </ script> <style> #MyCanvas {position: absolue; gauche: 0px; en haut: 0px;} # masquage {affichage: aucun;} </ style> </ad> <body onload = "preration ()"> <canvas id = "myCanvas"> </ canvas> <canvas id = "hide"> </ canvas> </ body> </html>J'espère que cet article sera utile à la programmation Web de chacun.