コメント：HTML5チュートリアルはPhotoshopの勾配色効果を実現します。
<！doctype html> <head>
<メタcharset = utf-8>
<Title> HTML5描画線、円、長方形</title>
<スクリプトsrc = "<a href =" http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "> </script"> </script </a >>
</head>
<スクリプト>
$（document）.ready（function（）{
var c = document.getElementById（ "drawbox"）;
var draw = c.getContext（ "2d"）; // 2Dコンテンツへの参照を取得するには、描画api </p> <p> //グラデーションブロックを指定します
var grd = draw.createlinear gradient（50,50,200,50）; //座標、長さ、幅
Grd.AddColorStop（0、 "Black"）; //色を開始します
Grd.AddColorStop（1、 "Green"）; // End Point Color </p> <p> draw.fillstyle = grd; //塗りつぶしスタイルとして設定します
Draw.FillRect（50,50,200,50）; //長方形に入力します
}）
</script>
</body>
<canvas> </canvas>
</body>
</html>
複製画像：