Rumah  >  Artikel  >  hujung hadapan web  >  Kesan butang main warna empat kecerunan yang dilukis menggunakan kemahiran tutorial javascript dan HTML5 Canvas_html5

Kesan butang main warna empat kecerunan yang dilukis menggunakan kemahiran tutorial javascript dan HTML5 Canvas_html5

WBOY
WBOYasal
2016-05-16 15:48:101505semak imbas

ialah teg baharu yang muncul dalam HTML5, seperti semua objek DOM, ia mempunyai sifat, kaedah dan peristiwanya sendiri. Antaranya ialah kaedah lukisan, yang boleh dipanggil oleh js to draw. , artikel ini menggunakan teg kanvas dan Javascript untuk melukis kesan butang main kecerunan empat warna, memaparkan:
Kesan butang main warna empat kecerunan yang dilukis menggunakan kemahiran tutorial javascript dan HTML5 Canvas_html5
Kod pelaksanaan:


Salin kod
Kod tersebut adalah seperti berikut:




Butang lukis


Pelayar anda tidak menyokong Kanvas, sila tingkatkan penyemak imbas anda!


var canvas = document.getElementById('myCanvas');/*Dapatkan kanvas yang ditakrifkan*/
var ctx = canvas.getContext('2d');/*Gunakan persekitaran 2 dimensi untuk melukis*/
drawPlayButton(ctx,200,200);
drawPlayButton(ctx,400,200);
drawPlayButton(ctx,300,200);
fungsi drawPlayButton(_context,x,y){
var nRadius=30;//Radius
_context.save();
_context.translate(x,y);
//Perubahan talian pembinaan
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);//Putar melalui putaran
redGrad.addColorStop(0, '#d0372f');
redGrad.addColorStop(0.5, '#e0675e');
redGrad.addColorStop(1, '#ce392d');
var greenGrad=_context.createLinearGradient(30,0,0,30);//Putar melalui putaran
greenGrad.addColorStop(0, '#059700');
greenGrad.addColorStop(0.5, '#02e003');
greenGrad.addColorStop(1, '#019a02');

//Lukis kandungan sudut antara dua lengkok
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);
//Warna bulatan dalam
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();//Bulatan dalam
_context.fillStyle=lingrad;
_context.arc(0,0,nRadius-10,0,Math.PI*2,true); _context.fill();
_context.closePath();
_context.restore();
//Lukis segi tiga
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();
}
//Lukis bentuk kipas
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);//Lukis garisan ke kanan
_context.arc(0,0,_nRadius,0,Math.PI/2,false); _context.lineTo(0,_nRadius-10);//Lukis
ke atas _context.arc(0,0,_nRadius-10,Math.PI/2,0,true); //Lukis lengkok dalam lawan jam
_context.fill();
_context.closePath();
_context.restore();
}





Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn