JavaScript と HTML5 を使用して描画された 4 つのグラデーション カラーの再生ボタン効果 Canvas_html5 チュートリアル スキル

は HTML5 に登場する新しいタグで、他の DOM オブジェクトと同様に、js から呼び出すことができる独自のプロパティ、メソッド、イベントがあります。この記事では、canvas タグと Javascript を使用して 4 色のグラデーション再生ボタン効果を描画します:

実装コード:

コードをコピー

コードは次のとおりです:

<頭>




お使いのブラウザは Canvas をサポートしていません。ブラウザをアップグレードしてください。
<スクリプトタイプ = "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);
functiondrawPlayButton(_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);//rotate
を通じて回転します redGrad.addColorStop(0, '#d0372f'); redGrad.addColorStop(0.5, '#e0675e'); redGrad.addColorStop(1, '#ce392d');
var greenGrad=_context.createLinearGradient(30,0,0,30);//rotate
を介して回転します 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);
linggrad.addColorStop(0, '#4672df'); linggrad.addColorStop(0.2, '#6188e5'); linggrad.addColorStop(0.5, '#98b1ef');
linggrad.addColorStop(0.8, '#b1c3f2');
linggrad.addColorStop(1, '#eaedfc');
_context.save();
_context.beginPath();//内円
_context.fillStyle=リングラード;
_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);
トライアングルラッド.addColorStop(0, '#99d4ea'); トライアングルラッド.addColorStop(0.2, '#5e8fdd'); 三角rad.addColorStop(0.5, '#0f17a1');
三角rad.addColorStop(0.8, '#4c65cc');
三角rad.addColorStop(1, '#7299e5');
_context.beginPath();
_context.fillStyle=trianglerad;
_context.moveTo(12,0);
_context.lineTo(-6,10);
_context.lineTo(-6,-10);
_context.fill();
_context.restore();
}
//扇形を描画します
functiondrawCake(_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();
}