L'exemple de cet article décrit comment dessiner une zone de dégradé à l'aide du canevas JavaScript html5. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
La capture d'écran de l'effet en cours d'exécution est la suivante :
Le code spécifique est le suivant :
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style type="text/css">
#canvas {
border:3px solid gray;
}
</style>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(0, 0, 200, 200);
ctx.closePath();
var gradient = ctx.createLinearGradient(0, 0, 200, 200);
gradient.addColorStop(0, "gray");
gradient.addColorStop(0.5, "red");
gradient.addColorStop(1, "blue");
ctx.fillStyle = gradient;
ctx.fill();
</script>
</html>
Les lecteurs intéressés par plus de contenu lié aux effets spéciaux js peuvent consulter les sujets spéciaux sur ce site : "Résumé de l'utilisation de l'animation et des effets spéciaux jQuery" et "Résumé de jQuery commun effets spéciaux classiques"
J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
