Effet de bouton de lecture de couleurs à quatre dégradés dessiné à l'aide des compétences du didacticiel Javascript et HTML5 Canvas_html5

est une nouvelle balise qui apparaît dans HTML5. Comme tous les objets DOM, elle possède ses propres propriétés, méthodes et événements. Parmi eux se trouve la méthode de dessin, qui peut être appelée par js. draw. , cet article utilise des balises canevas et Javascript pour dessiner un effet de bouton de lecture dégradé à quatre couleurs, rendu :

Code d'implémentation :

Copier le code

Le code est le suivant :

Bouton Dessiner


Votre navigateur ne prend pas en charge Canvas, veuillez mettre à jour votre navigateur !


var canvas = document.getElementById('myCanvas');/*Obtenir le canevas défini*/
var ctx = canvas.getContext('2d');/*Utiliser un environnement bidimensionnel pour peindre*/
drawPlayButton(ctx,200,200);
drawPlayButton(ctx,400,200);
drawPlayButton(ctx,300,200);
fonction drawPlayButton(_context,x,y){
var nRadius=30;//Rayon
_context.save();
_context.translate(x,y);
//Changement de ligne de construction
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);//Rotation via rotation
redGrad.addColorStop(0, '#d0372f');
redGrad.addColorStop(0.5, '#e0675e');
redGrad.addColorStop(1, '#ce392d');
var greenGrad=_context.createLinearGradient(30,0,0,30);//Rotation via rotation
greenGrad.addColorStop(0, '#059700');
greenGrad.addColorStop(0.5, '#02e003');
greenGrad.addColorStop(1, '#019a02');

//Dessine le contenu de l'angle entre deux arcs
drawCake(_context,0,jauneGrad,nRadius);
drawCake(_context,Math.PI/2,blueGrad,nRadius);
drawCake(_context,Math.PI,redGrad,nRadius);
drawCake(_context,3*Math.PI/2,greenGrad,nRadius);
//Couleur du cercle intérieur
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();//Cercle intérieur
_context.fillStyle=lingrad;
_context.arc(0,0,nRadius-10,0,Math.PI*2,true
); _context.fill();
_context.closePath();
_context.restore();
//Dessiner un triangle
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();
>
//Dessinez une forme d'éventail
fonction drawCake(_context,_nRotateAngle,_fillColor,_nRadius){
_context.save();
_context.beginPath();
_context.fillStyle=_fillColor;
_context.rotate(_nRotateAngle);
_context.moveTo(_nRadius-10,0);
_context.lineTo(_nRadius,0);//Trace une ligne vers la droite
_context.arc(0,0,_nRadius,0,Math.PI/2,false); _context.lineTo(0,_nRadius-10);//Dessine un
vers le haut _context.arc(0,0,_nRadius-10,Math.PI/2,0,true); //Dessiner l'arc intérieur dans le sens inverse des aiguilles d'une montre
_context.fill();
_context.closePath();
_context.restore();
>