This article example describes the method of drawing elliptical patterns by js+html5. HTML5 canvas does not have a method of drawing ellipticals. The following code can draw ellipticals. It is shared with you for your reference. The specific implementation method is as follows:
1. On an implicit canvas (define its CSS as: display:none; ).
2. Draw the image of the implicit canvas with different aspect ratios on another explicit canvas to turn the garden into an ellipse.
3. Furthermore, add animation function.
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Test color background</title><script>var ticker=0;var col = new Array("#000000","#A52A2A","#B8860B","pink","green","yellow","red","orange","#BB008B","#8B0000"); function drawBackground(){var canvasHide=document.getElementById("hide"); //Hidden canvas var g=canvasHide.getContext("2d"); //Find out the brush of the hidden canvas hide g g.clearRect(0,0,1200,800); //Clean the hidden canvas var i=0;do { //Draw the garden where different colors are concentric and divergent in sequence 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++;} while(i<11); //Find out the brush of the explicit canvas myCanvas gg var gg=document.getElementById("myCanvas").getContext("2d");gg.clearRect(0,0,myCanvas.width,myCanvas.height); //Clean the explicit canvas/* Draw the garden image of the implicit canvas with a scale of 600 width and 300 height, * Draw to the explicit canvas myCanvas, * As a result, the garden image of the implicit canvas with an ellipse on the explicit canvas myCanvas*/gg.drawImage(canvasHide,0,0,600,300); ticker++;} function preperation(){setInterval('drawBackground()',1000); }</script><style>#myCanvas{ position:absolute; left:0px; top:0px;}#hide{ display:none;}</style></head> <body onLoad="preperation()"><canvas id="myCanvas" ></canvas><canvas id="hide" ></canvas> </body></html>I hope this article will be helpful to everyone's web programming.