ความคิดเห็น: บทความนี้ส่วนใหญ่แนะนำเอฟเฟกต์ของปุ่มการเล่นสีไล่ระดับสีสี่ปุ่มที่วาดโดยใช้ JavaScript และ HTML5 Canvas เพื่อนที่ต้องการมันสามารถอ้างถึงมันได้
<Canvas> </sanvas> เป็นแท็กใหม่ที่ปรากฏใน HTML5 เช่นเดียวกับวัตถุ DOM ทั้งหมดมันมีคุณสมบัติวิธีการและเหตุการณ์ของตัวเองรวมถึงวิธีการวาดภาพ JS สามารถเรียกได้ว่าวาด บทความนี้ใช้แท็ก Canvas และ JavaScript เพื่อวาดเอฟเฟกต์ปุ่มการไล่ระดับสีแบบไล่ระดับสีสี่สี ภาพเอฟเฟกต์:
รหัสการใช้งาน:
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = gbk">
<title> ปุ่มวาด </title>
</head>
<body>
<Canvas> เบราว์เซอร์ของคุณไม่รองรับผืนผ้าใบโปรดอัพเกรดเบราว์เซอร์ของคุณ! </sanvas>
<script type = "text/javascript">
var canvas = document.getElementById ('mycanvas');/*รับ canvas ที่กำหนดไว้*/
var ctx = canvas.getContext ('2d');/*วาดในสภาพแวดล้อม 2 มิติ*//
DrawplayButton (CTX, 200,200);
DrawplayButton (CTX, 400,200);
DrawplayButton (CTX, 300,200);
ฟังก์ชั่น drawplaybutton (_context, x, y) {
var nradius = 30; // รัศมี
_context.save ();
_context.translate (x, y);
// เปลี่ยนสายการก่อสร้าง
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); // หมุนโดยการหมุน
redgrad.addcolorstop (0, '#d0372f');
redgrad.addcolorstop (0.5, '#e0675e');
redgrad.addcolorstop (1, '#ce392d');
var greengrad = _context.createlineargradient (30,0,0,30); // หมุนโดยการหมุน
Greengrad.addColorStop (0, '#059700');
Greengrad.addColorStop (0.5, '#02E003');
Greengrad.addColorStop (1, '#019A02');
// วาดมุมสองส่วนโค้ง
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);
// สีวงกลมภายใน
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 (); // วงใน
_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, จริง); // วาดเส้นโค้งด้านในทวนเข็มนาฬิกา
_context.fill ();
_context.closepath ();
_context.restore ();
-
</script>
</body>
</html>