Комментарий: Эта статья в основном представляет эффект четырех кнопок для воспроизведения градиента, нарисованных с использованием холста JavaScript и HTML5. Друзья, которые это нужно, могут ссылаться на это.
<Canvas> </canvas> - это новый тег, который появляется в HTML5. Как и все объекты DOM, он обладает своими собственными свойствами, методами и событиями, включая методы рисования. М.С. может вызвать это, чтобы нарисовать. В этой статье используются тег Canvas и JavaScript, чтобы нарисовать четырехцветный эффект кнопки Gradient Play. Картина эффекта:
Код реализации:
<html>
<голова>
<meta http-equiv = "content-type" content = "text/html; charset = gbk">
<Tilt> Кнопка рисования </title>
</head>
<тело>
<canvas> Ваш браузер не поддерживает Canvas, пожалуйста, обновите свой браузер! </canvas>
<script type = "text/javascript">
var canvas = document.getelementbyid ('mycanvas');/*Получить определенный холст*/
var ctx = canvas.getContext ('2d');/*Нарисуйте в двухмерной среде*/
Drallplaybutton (CTX, 200 200);
Drallplaybutton (CTX, 400 200);
Drallplaybutton (CTX, 300 200);
Функция DrallPlayButton (_Context, x, y) {
var nradius = 30; // радиус
_context.save ();
_context.translate (x, y);
// Изменение строительной линии
var hellowgradgr = _context.createLinearGradient (30,0,0,30);
hellowgrad.addcolorstop (0, '#FCCB02');
hellowgrad.addcolorstop (0,5, '#fbf14d');
hellowgrad.addcolorstop (1, '#ffcb02');
var bluegrad = _context.createLinearGradient (30,0,0,30);
bluegrad.addcolorstop (0, '#2a459c');
bleangrad.addcolorstop (0,5, '#0E7ADC');
bleangrad.addcolorstop (1, '#2a459e');
var redgradgr = _context.createLinearGradient (30,0,0,30); // вращается, вращающиеся
redgrad.addcolorstop (0, '#D0372F');
Redgrad.AddColorStop (0,5, '#E0675E');
Redgrad.AddColorStop (1, '#CE392D');
var greengragr = _context.createLinearGradient (30,0,0,30); // вращается, вращающиеся
greengragr.addcolorstop (0, '#059700');
greengragr.addcolorstop (0,5, '#02E003');
greengragr.addcolorstop (1, '#019a02');
// Нарисуйте угол двух дуг
DrawCake (_Context, 0, Yellowgrad, Nradius);
DrawCake (_Context, Math.pi/2, Bleacgrad, Nradius);
DrawCake (_Context, Math.pi, Redgrad, Nradius);
DrawCake (_Context, 3*Math.pi/2, Greengrad, Nradius);
// Цвет внутреннего круга
var lingrad = _context.createlinearGradient (-30, -30,30,30);
lingrad.addcolorstop (0, '#4672df');
lingrad.addcolorstop (0,2, '#6188e5');
lingrad.addcolorstop (0,5, '#98b1ef');
lingrad.addcolorstop (0,8, '#b1c3f2');
lingrad.addcolorstop (1, '#eedfc');
_context.save ();
_context.beginpath (); // внутренний круг
_context.fillstyle = lingrad;
_context.arc (0,0, Nradius-10,0, Math.pi*2, true);
_context.fill ();
_context.closepath ();
_context.restore ();
// рисовать треугольник
var trianglerad = _context.createlinearGradient (-6, -10, -6,10);
trianglerad.addcolorstop (0, '#99d4ea');
trianglerad.addcolorstop (0,2, '#5e8fdd');
trianglerad.addcolorstop (0,5, '#0F17A1');
trianglerad.addcolorstop (0,8, '#4C65CC');
trianglerad.addcolorstop (1, '#7299e5');
_context.beginpath ();
_context.fillstyle = trianglerad;
_context.moveto (12,0);
_context.lineto (-6,10);
_context.lineto (-6, -10);
_context.fill ();
_context.restore ();
}
// Нарисуйте вентилятор
Функция DrawCake (_Context, _nRotateAngle, _fillcolor, _nradius) {
_context.save ();
_context.beginpath ();
_context.fillstyle = _fillcolor;
_context.rotate (_nrotateangle);
_context.moveto (_nradius-10,0);
_context.lineto (_nradius, 0); // Нарисуйте линию справа
_context.arc (0,0, _nradius, 0, math.pi/2, false);
_context.lineto (0, _nradius-10); // Нарисуйте один вверх
_context.arc (0,0, _nradius-10, math.pi/2,0, true); // Нарисуйте внутреннюю дугу против часовой стрелки
_context.fill ();
_context.closepath ();
_context.restore ();
}
</script>
</body>
</html>