Comment puis-je dessiner un rectangle avec un effet de dégradé comme celui illustré ci-dessous en utilisant l'élément de canevas HTML5?Dégradé rectangulaire avec élément de toile HTML5
Edit: Merci pour tous les commentaires. Oui, j'ai déjà essayé plusieurs méthodes. Par exemple, puis-je utiliser la méthode createRadialGradient
comme le suggère @Loktar? Voici quelques exemples de code:
<html>
<head>
<title>test</title>
<script type="application/x-javascript">
function draw() {
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
var grad1 = ctx.createRadialGradient(50, 50, 0, 50, 50, 50);
grad1.addColorStop(0, 'rgba(255, 252, 0, 1)');
grad1.addColorStop(1, 'rgba(68, 205, 37, 1)');
ctx.fillStyle = grad1;
ctx.fillRect(0, 0, 100, 100);
}
</script>
</head>
<body onload="draw();">
<div>
<canvas id="canvas" width="100" height="100"></canvas>
</div>
</body>
</html>
Mais le résultat est pas tout à fait ce que je veux:
Cela devrait être fait facilement avec une méthode comme PathGradientBrush
fournie par GDI +. Je ne suis pas sûr que ce soit possible avec l'élément canvas HTML5.
Qu'avez-vous essayé jusqu'à présent? p.s. https://developer.mozilla.org/en/Canvas_tutorial%3aApplying_styles_and_colors 5 minutes et vous serez capable de le faire! – stecb
heh idk environ 5 mins. Heres ma tentative horrible, même pas aller le poster comme réponse http://jsfiddle.net/loktar/MAJPQ/1/ – Loktar
obv '5 mins' signifie qu'il est facile de lire ce doc et essayer d'obtenir une solution facilement :) – stecb