Empat Efek Tombol Play Warna Gradien Ditarik Menggunakan JavaScript dan HTML5 Canvas

Penulis：Eve Cole Waktu Pembaruan：2025-08-22 04:16:01

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>

<title> Tombol Draw </iteme>

</head>

<body>

<anvas> browser Anda tidak mendukung kanvas, silakan tingkatkan browser Anda! </ Canvas>

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>