Kommentar: Das HTML5 -Tutorial erkennt den Gradientenfarbeneffekt von Photoshop. Weitere Informationen finden Sie darauf
<! DocType html> <kopf>
<meta charset = utf-8>
<title> html5 Zeichnungszeilen, Kreise, Rechtecke </title>
<script src = "<a href =" http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "> </script"> "> </script </a >>
</head>
<Script>
$ (Dokument) .Ready (function () {
var c = document.getElementById ("DrawBox");
var draw = C.GetContext ("2D"); // Erhalten Sie einen Verweis auf den 2D
var grd = draw.createlineargradient (50,50,200,50); // Koordinaten, Länge und Breite
grd.addcolorstop (0, "schwarz"); // Farbe starten
grd.addcolorstop (1, "grün"); // Endpunktfarbe </p> <p> Draw.Fillstyle = grd; // als Füllstil einstellen
Draw.FillRect (50,50,200,50); // in das Rechteck füllen
})
</script>
</body>
<Canvas> </canvas>
</body>
</html>
Reproduktionsbild: