Komentar: Artikel ini terutama memperkenalkan efek dari empat tombol bermain warna gradien yang digambar menggunakan JavaScript dan HTML5 Canvas. Teman yang membutuhkannya bisa merujuknya.
<Canvas> </ Canvas> adalah tag baru yang muncul di HTML5. Seperti semua objek DOM, ia memiliki sifat, metode, dan peristiwa sendiri, termasuk metode menggambar. JS bisa menyebutnya untuk menggambar. Artikel ini menggunakan tag Canvas dan JavaScript untuk menggambar efek tombol play gradien empat warna. Gambar efeknya:
Kode Implementasi:
<Html>
<head>
<meta http-equiv = "konten tipe" content = "text/html; charset = gbk">
<title> Tombol Draw </iteme>
</head>
<body>
<anvas> browser Anda tidak mendukung kanvas, silakan tingkatkan browser Anda! </ Canvas>
<type skrip = "Teks/JavaScript">
var canvas = document.geteLementById ('mycanvas');/*Dapatkan kanvas yang ditentukan*/
var ctx = canvas.getContext ('2d');/*Gambar dalam lingkungan 2 dimensi*/
DrawplayButton (CTX, 200.200);
drawplayButton (CTX, 400.200);
drawplayButton (CTX, 300.200);
function drawplayButton (_context, x, y) {
var nradius = 30; // radius
_context.save ();
_context.translate (x, y);
// Perubahan Garis Konstruksi
var yellowgrad = _context.createLineArgradient (30,0,0,30);
yellowgrad.addcolorstop (0, '#fccb02');
yellowgrad.addcolorstop (0,5, '#fbf14d');
yellowgrad.addcolorstop (1, '#ffcb02');
var bluegrad = _context.createLineArgradient (30,0,0,30);
bluegrad.addcolorstop (0, '#2a459c');
bluegrad.addcolorstop (0,5, '#0e7adc');
bluegrad.addcolorstop (1, '#2a459e');
var redgrad = _context.createLineArgradient (30,0,0,30); // putar dengan berputar
redgrad.addcolorstop (0, '#d0372f');
redgrad.addcolorstop (0,5, '#e0675e');
redgrad.addcolorstop (1, '#ce392d');
var greengrad = _context.createLineArgradient (30,0,0,30); // putar dengan rotate
greengrad.addcolorstop (0, '#059700');
greengrad.addcolorstop (0,5, '#02e003');
greengrad.addcolorstop (1, '#019a02');
// Gambarlah sudut dua busur
DrawCake (_Context, 0, Yellowgrad, Nradius);
DrawCake (_Context, Math.pi/2, Bluegrad, Nradius);
drawCake (_context, math.pi, redgrad, nradius);
DrawCake (_Context, 3*Math.pi/2, Greengrad, Nradius);
// warna lingkaran dalam
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, '#eAedfc');
_context.save ();
_context.beginpath (); // lingkaran dalam
_context.fillstyle = lingrad;
_context.arc (0,0, nradius-10,0, math.pi*2, true);
_context.fill ();
_context.closePath ();
_context.Restore ();
// Gambar segitiga
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 ();
}
// Gambarlah penggemar
function drawCake (_context, _nrotateanggle, _fillcolor, _nradius) {
_context.save ();
_context.beginpath ();
_context.fillstyle = _fillColor;
_context.rotate (_nrotateanggle);
_context.moveto (_nradius-10,0);
_context.lineto (_nradius, 0); // Gambar garis di sebelah kanan
_context.arc (0,0, _nradius, 0, Math.pi/2, false);
_context.lineto (0, _nradius-10); // Gambarlah satu ke atas
_context.arc (0,0, _nradius-10, math.pi/2,0, true); // gambar busur bagian dalam berlawanan arah jarum jam
_context.fill ();
_context.closePath ();
_context.Restore ();
}
</script>
</body>
</html>