この記事の例では、JS+HTML5による楕円パターンを描画する方法について説明します。 HTML5キャンバスには、楕円形を描く方法がありません。次のコードは、楕円形を描画できます。それはあなたの参照のためにあなたと共有されます。特定の実装方法は次のとおりです。
1。暗黙のキャンバス（そのCSSを：display：none;）として定義します。）。
2。別の明示的なキャンバスに異なるアスペクト比を持つ暗黙のキャンバスの画像を描き、庭を楕円に変えます。
3.さらに、アニメーション関数を追加します。
<html> <head> <メタhttp-equiv = "content-type" content = "text/html; charset = utf-8"/> <title>テスト色の背景</title> <script> var ticker = 0; var col = new = new array（ "＃000000"、 "＃a52a2a"、 "＃b8860b"、 "pink"、 "green"、 "yellow"、 "red"、 "orange"、 "＃bb008b"、 "＃8b0000"）; function dookbackground（）{var canvashide = document.getElementById（ "hide"）; //非表示のキャンバスvar g = canvashide.getContext（ "2d"）; //隠されたキャンバスのブラシを見つけますG.ClearRect（0,0,1200,800）; //隠されたキャンバスvar i = 0; do {//異なる色が同心と発散している庭を描くg.beginpath（）; var grd = g.createradialgradient（300,300,300-I*25、 300,300,265-I*25）; grd.addcolorstop（0、col [（0+i+ティッカー）％col.length]）; grd.addcolorstop（1、col [（（）） 1+i+ティッカー）％col.length]）; g.fillstyle = grd; g.arc（300,300,300-i*25,0,2*math.pi）; g.fill（）; i ++;} while（i <11）; //明示的なキャンバスMyCanvas gg var gg = document.getElementById（ "mycanvas"）。getContext（ "2d"）; gg.ClearRect（0,0、MyCanvas.Width、MyCanvas.Height）; //明示的なキャンバスをきれいにしてください/ * 600幅と高さ300のスケールで暗黙のキャンバスの庭の画像を描く *明示的なキャンバスmycanvasに描画します *結果として、明示的なキャンバスmycanvas */gg.drawimage（Canvashide、0,0,600,300）の楕円を持つ暗黙のキャンバスの庭の画像。ティッカー++;} function preperation（）{setInterval（ 'dowbackground（）'、1000）; } </script> <style> #mycanvas {position：absolute;左：0px; TOP：0px;}＃hide {display：none;} </style> </head> <body onload = "preperation（）"> <canvas id = "mycanvas"> </canvas> <canvas id = "hide"> </canvas> </body> </html>この記事がすべての人のWebプログラミングに役立つことを願っています。