Javascript Girl
  1. Javascript Girl
  3. Gradient d'angle sur toile
Intereting Posts
Vous cherchez à développer une expansion sur le plancher / contrat sur flou div JQuery Les éléments ajoutés avec href et javascript ne fonctionnent pas Comment utiliser javascript intégrée aux arguments correctement? Comment utiliser des chaînes avec des tableaux dactylographiés JavaScript Comment diviser un long tableau en petits tableaux, avec JavaScript Comment définir la date d'expiration du cookie dans AngularJS Mutation Observer ne reçoit qu'un contenu spécifique Angularjs: le contrôleur s'appelle plusieurs fois Simuler l'événement clé de la flèche gauche et droite avec javascript Bibliothèque Javascript pour prendre une capture d'écran de la page Web Firefox – comment obtenir le texte sélectionné en double-clic Comment transférer les données entre les composants, s'ils ne sont pas des composants parents-enfants dans Angular2? Accédez à iFrame DOM enfant de la page parent Node.js GET Request ETIMEDOUT & ESOCKETTIMEDOUT Supprimez tous les <li> de <ul>?

Gradient d'angle sur toile

Je cherche un code qui permet d'avoir cet effet sur un coup de toile . J'ai déjà un coup circulaire animé, j'ai seulement besoin d'obtenir le gradient ANGLE, pas linéaire et non radial. J'ai seulement 3 couleurs. L'existant est disponible ici (la note d'évaluation)

Merci tout le monde 🙂

Un contexte strokeStyle peut être un gradient: 

// create a gradient gradient = ctx.createLinearGradient(xStart, yStart, xEnd, yEnd); gradient.addColorStop(0.0,"blue"); gradient.addColorStop(1.0,"purple"); // stroke using that gradient ctx.strokeStyle = gradient;

Exemple de code et une démo en utilisant un gradient de type de trame: http://jsfiddle.net/m1erickson/w46ps/

Entrez la description de l'image ici

 <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <style> body{ background-color: ivory; } #canvas{border:1px solid red;} </style> <script> $(function(){ var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); function drawMultiRadiantCircle(xc, yc, r, radientColors) { var partLength = (2 * Math.PI) / radientColors.length; var start = 0; var gradient = null; var startColor = null, endColor = null; for (var i = 0; i < radientColors.length; i++) { startColor = radientColors[i]; endColor = radientColors[(i + 1) % radientColors.length]; // x start / end of the next arc to draw var xStart = xc + Math.cos(start) * r; var xEnd = xc + Math.cos(start + partLength) * r; // y start / end of the next arc to draw var yStart = yc + Math.sin(start) * r; var yEnd = yc + Math.sin(start + partLength) * r; ctx.beginPath(); gradient = ctx.createLinearGradient(xStart, yStart, xEnd, yEnd); gradient.addColorStop(0, startColor); gradient.addColorStop(1.0, endColor); ctx.strokeStyle = gradient; ctx.arc(xc, yc, r, start, start + partLength); ctx.lineWidth = 30; ctx.stroke(); ctx.closePath(); start += partLength; } } var someColors = []; someColors.push('#0F0'); someColors.push('#0FF'); someColors.push('#F00'); someColors.push('#FF0'); someColors.push('#F0F'); drawMultiRadiantCircle(150, 150, 120, someColors); }); // end $(function(){}); </script> </head> <body> <canvas id="canvas" width=300 height=300></canvas> </body> </html>

J'avais aussi besoin de cet effet, il y a quelques jours, et j'ai réussi à créer une solution de contournement .

Ce que j'ai fait était superposer un gradient sur l'autre en utilisant quelque chose comme ceci: 

 var ic = [ /*0*/{ a:"#FEC331" ,b:"#FB1E24" ,r1:0 ,r2:1 ,x0:0 ,y0:rd*0.5 ,x1:0 ,y1:-rd}, /*1*/{ a:"#FEC331" ,b:"#FB1E24" ,r1:0.5 ,r2:0.5 ,x0:0 ,y0:rd*0.3 ,x1:0 ,y1:-rd}, /*2*/{ a:"#EA6F2B" ,b:"transparent" ,r1:0 ,r2:1 ,x0:-rd ,y0:0 ,x1:rd ,y1:0 } ];

Voici le code complet et la démonstration dans JSFiddle:

https://jsfiddle.net/flamedenise/n9no9Lgw/33/

J'espère que cela aide.