Comentario: El tutorial HTML5 se da cuenta del efecto de color de gradiente de Photoshop, consultelo
<! DOCTYPE HTML> <HEAD>
<meta charset = utf-8>
<title> html5 líneas de dibujo, círculos, rectángulos </title>
<script src = "<a href =" http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "> </script"> "> </script </a >>
</ablo>
<script>
$ (documento) .Ready (function () {
var c = document.getElementById ("Drawbox");
var dibujo = c.getContext ("2d"); // Obtenga una referencia al contenido 2D, llame a la API de dibujo </p> <p> // especifique el bloque de gradiente
var grd = dibujo // coordenadas, longitud y ancho
grd.addcolorstop (0, "negro"); // comienza el color
grd.addcolorstop (1, "verde"); // end de color color </p> <p> draw.fillstyle = grd; // establecido como estilo de relleno
dibujo. Filfilla (50,50,200,50); // rellenar el rectángulo
})
</script>
</body>
<Canvas> </Canvas>
</body>
</html>
Imagen de reproducción: