HTML5 Canvas Draw Linear Gradient

컴프

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 8년 전 · 조회 2295 2295

Example

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

var ctx = c.getContext("2d");

// Create gradient

var grd = ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Fill with gradient

ctx.fillStyle = grd;

ctx.fillRect(10,10,150,80)

<!DOCTYPE html>

<html>

<body>

Your browser does not support the HTML5 canvas tag.</canvas>

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

var ctx = c.getContext("2d");

// Create gradient

var grd = ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Fill with gradient

ctx.fillStyle = grd;

ctx.fillRect(10,10,150,80);

</script>

</body>

</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
1097	CSS	align-content 속성	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2181
1096	CSS	flex-wrap 프로퍼티 [1]	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2099
1095	CSS	align-items 속성	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3593
1094	CSS	justify-content 속성	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2275
1093	CSS	플렉스 방향	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1499
1092	CSS	CSS3 Flexbox	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1787
1091	CSS	CSS3 box-sizing 속성 사용 [1]	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1953
1090	CSS	CSS3 box-sizing 속성없이	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1914
1089	HTML	html예제 사이트	덕서리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	4412
1088	CSS	CSS3 사용자 인터페이스 속성	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1471
1087	CSS	CSS3 사용자 인터페이스 - CSS3 개요 오프셋	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1599
1086	CSS	CSS3 사용자 인터페이스 - CSS3 크기 조정	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1506
1085	CSS	열 너비 지정	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1529
1084	CSS	요소가 얼마나 많은 열을 포함하는지 지정	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1245
1083	CSS	CSS3 열 규칙	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1055
1082	CSS	CSS3 열 사이의 간격 지정	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2154
1081	CSS	CSS3 다중 열 레이아웃	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1954
1080	CSS	Breadcrumbs	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1916
1079	CSS	중앙 페이지 매김	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1964
1078	CSS	페이지 매김 크기	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1658
1077	CSS	링크 사이의 공간	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1683
1076	CSS	둥근 테두리	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2022
1075	CSS	테두리가있는 페이지 매김	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1878
1074	CSS	둥근 활성 및 호버링 버튼	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1690
1073	CSS	Active 및 Hoverable Pagination	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1540
1072	CSS	CSS 페이지 매김의 예	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1625
1071	CSS	애니메이션 버튼	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2022
1070	CSS	세로 단추 그룹	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1591
1069	CSS	테두리가있는 단추 그룹	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1828
1068	CSS	버튼 그룹	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1634