コメント:この記事では、主に、JavaScriptとHTML5 Canvasを使用して描かれた4つの勾配カラー再生ボタンの効果を紹介します。それを必要とする友達はそれを参照できます。
<canvas> </canvas>は、HTML5に表示される新しいタグです。すべてのDOMオブジェクトと同様に、描画方法を含む独自のプロパティ、方法、イベントがあります。 JSはそれを呼び出すことができます。この記事では、CanvasタグとJavaScriptを使用して、4色のグラデーションプレイボタン効果を描画します。エフェクト画像:
実装コード:
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = gbk">
<title>描画ボタン</title>
</head>
<body>
<Canvas>ブラウザはCanvasをサポートしていません。ブラウザをアップグレードしてください! </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; // radius
_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');
// 2つのアークの角度を描きます
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();
}
//ファンを描きます
function 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); // 1つを上向きに描画します
_Context.arc(0,0、_nradius-10、math.pi/2,0、true); //内側アークを反時計回りに描画します
_context.fill();
_context.closepath();
_context.restore();
}
</script>
</body>
</html>