주석 :이 기사는 주로 JavaScript 및 HTML5 캔버스를 사용하여 그린 4 개의 그라디언트 컬러 재생 버튼의 효과를 소개합니다. 필요한 친구는 그것을 참조 할 수 있습니다.
<canvas> </canvas>는 html5에 나타나는 새로운 태그입니다. 모든 DOM 객체와 마찬가지로 그리기 방법을 포함하여 자체 특성, 방법 및 이벤트가 있습니다. JS는이를 호출 할 수 있습니다. 이 기사는 Canvas 태그와 JavaScript를 사용하여 4 색 그라디언트 플레이 버튼 효과를 그립니다. 효과 사진 :
구현 코드 :
<html>
<헤드>
<meta http-equiv = "content-type"content = "text/html; charset = gbk">
<title> 드로우 버튼 </title>
</head>
<body>
<canvas> 브라우저는 캔버스를 지원하지 않으므로 브라우저를 업그레이드하십시오! </캔버스>
<script type = "text/javaScript">
var canvas = document.getElementByid ( 'mycanvas');/*정의 된 캔버스 받기*/
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 옐로 그레이드 = _context.createlineargradient (30,0,0,30);
옐로우 그레이드 .addcolorstop (0, '#fccb02');
Yellowgrad.addcolorstop (0.5, '#fbf14d');
옐로우 그레이드 .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 ();
}
// 팬을 그립니다
함수 드로우 케이크 (_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 ();
}
</스크립트>
</body>
</html>