В этом примере статьи описывается метод рисования эллиптических шаблонов JS+HTML5. HTML5 Canvas не имеет метода рисования эллиптических средств. Следующий код может нарисовать эллиптические. Это совместно с вами для вашей ссылки. Конкретный метод реализации следующим образом:
1. на неявном холсте (определите его CSS как: дисплей: нет;).
2. Нарисуйте изображение неявного холста с различными соотношениями сторон на другом явном холсте, чтобы превратить сад в эллипс.
3. Кроме того, добавьте функцию анимации.
<html> <Head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> тест цвето Array ("#000000", "#A52A2A", "#B8860B", "Pink", "Green", "желтый", "красный", "Orange", "#BB008B", "#8B0000"); функция Delepbackground () {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+ticker)%col.length]);grd.addColorStop(1,col[( 1+i+тикер)%col.length]); g.fillstyle = grd; g.arc (300,300 300-i*25,0,0,2*math.pi); g.fill (); i ++;} пока (я <11); // Узнайте щетку явного холста MyCanvas gg var gg = document.getElementbyId ("myCanvas"). GetContext ("2d"); gg.clearrect (0,0, myCanvas.width, myCanvas.height); // Очистите явное холст/ * Нарисуйте изображение сада неявного холста со шкалой ширины 600 и высотой 300, * нарисуйте на явные холст mycanvas, * В результате изображение сада неявного канваса с эллипсом на явном холсте); ticker ++;} function prepection () {setInterval ('Delepbackground ()', 1000); } </script> <style> #mycanvas {position: Absolute; слева: 0px; Top: 0px;}#hide {display: none;} </style> </head> <body onload = "prepation ()"> <canvas id = "mycanvas"> </canvas> <canvas id = "hide"> </canvas> </body> </html>Я надеюсь, что эта статья будет полезна для каждого веб -программирования.