Tutoriel HTML5 pour réaliser l'effet de gradient Photoshop

Commentaire: Le tutoriel HTML5 réalise l'effet de couleur dégradé de Photoshop, veuillez vous y référer

<! Doctype html> <éad- head>

<Meta Charset = UTF-8>

<Title> HTML5 Dessin Lignes, Cercles, Rectangles </Title>

<script src = "<a href =" http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "> </ script"> "> </ script </ a>

</ head>

<cript>

$ (document) .ready (function () {

var c = document.getElementById ("Drawbox");

var draw = c.getContext ("2d"); // Obtenez une référence au contenu 2D, appelez l'API de dessin </p> <p> // Spécifiez le bloc de gradient

var grd = draw.CreateLlineargradient (50,50,200,50); // Coordonnées, longueur et largeur

Grd.AddColorstop (0, "noir"); // Démarrer la couleur

Grd.AddColOrStop (1, "Green"); // Couleur du point final </p> <p> Draw.FillStyle = GRD; // Définir le style de remplissage

draw.filrect (50,50,200,50); // remplit le rectangle

})

</cript>

</docy>

<lebvas> </ canvas>

</docy>

</html>

Image de reproduction: