コメント：この記事では、主に、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>