Contoh artikel ini menjelaskan metode menggambar pola elips oleh JS+HTML5. Kanvas HTML5 tidak memiliki metode menggambar elips. Kode berikut dapat menggambar elips. Ini dibagikan kepada Anda untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
1. Pada kanvas implisit (tentukan CSS -nya sebagai: Tampilan: tidak ada;).
2. Gambarkan gambar kanvas implisit dengan rasio aspek yang berbeda pada kanvas eksplisit lain untuk mengubah taman menjadi elips.
3. Selanjutnya, tambahkan fungsi animasi.
<html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <iteme> latar belakang warna tes </iteme> <script> var ticker = 0; var col = new Array ("#000000", "#A52A2A", "#B8860B", "Pink", "Green", "Yellow", "Red", "Orange", "#BB008B", "#8B0000"); function lemparground () {var canvashide = document.geteLementById ("hide"); // Canvas tersembunyi var g = canvashide.getContext ("2d"); // Cari tahu kuas kanvas tersembunyi Hide G G.Clearrect (0,0,1200.800); // Bersihkan kanvas tersembunyi var i = 0; do {// Gambarlah taman di mana warna yang berbeda konsentris dan berbeda dalam urutan 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 [((col [((1 1+i+ticker)%col.length]); g.fillstyle = grd; g.arc (300.300.300-i*25,0,2*Math.pi); g.fill (); i ++;} sementara (i <11); // Cari tahu kuas kanvas eksplisit mycanvas gg var gg = document.geteLementById ("mycanvas"). GetContext ("2d"); gg.clearrect (0,0, mycanvas.width, mycanvas.height); // Bersihkan kanvas eksplisit/ * Gambarlah gambar taman dari kanvas implisit dengan skala 600 lebar dan tinggi 300, * menarik ke kanvas eksplisit myCanvas, * Akibatnya, citra taman kanvas implisit dengan elips pada kanvas eksplisit mycanvas */gg.drawimage, canelips 0) (cannvas, 0), cannvas, 0), cannvas 0) (cannvas, 0), cannvas 0) (cannvas, 0, 6), cannvas 0), cannvas 0) (cannvas, 0, 6), CanLipse, 6) (Canvas, 0. ticker ++;} function preperation () {setInterval ('lemparbackground ()', 1000); } </script> <tyle> #mycanvas {position: absolute; Kiri: 0px; Atas: 0px;}#sembunyikan {display: none;} </tyle> </head> <body onload = "preperation ()"> <canvas id = "mycanvas"> </an canvas> <canvas id = "hide"> </canvas> </body> </html>Saya harap artikel ini akan membantu pemrograman web semua orang.