댓글 : HTML5 자습서는 Photoshop의 그라디언트 색 효과를 알고 있습니다. 참조하십시오.
<! doctype html> <head>
<meta charset = utf-8>
<title> html5 드로잉 라인, 원, 사각형 </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"); // 2D 컨텐츠에 대한 참조를 얻으려면 도면 API로 전화하십시오 </p> <p> // 그라디언트 블록을 지정하십시오.
var grd = draw.createlineargradient (50,50,200,50); // 좌표, 길이 및 너비
grd.addcolorstop (0, "black"); // 색상을 시작합니다
grd.addcolorstop (1, "green"); // 엔드 포인트 컬러 </p> <p> draw.fillstyle = grd; // 채우기 스타일로 설정합니다
draw.fillRect (50,50,200,50); // 사각형에 채 웁니다
})
</스크립트>
</body>
<canvas> </canvas>
</body>
</html>
생식 이미지 :