HTML5 Canvas Draw Linear Gradient

컴프

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

· 8년 전 · 조회 2306 2306

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에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
137	HTML	테이블안에 있는 글 자동 정렬하기 [1]	작은새 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3778
136	HTML	Ajax강의- 첫번째 강의의 pdf중 발표문건 61-65	pearly 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4132
135	HTML	Fedora Core FTP로 설치 [3]	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4234
134	HTML	Ajax강의- 첫번째 강의의 pdf중 발표문건 21-30	pearly 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4648
133	HTML	전체화면으로 페이지 열기	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3273
132	HTML	이번에는 텍스트영역에서 메세지별로 타이핑 시킵니다	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3133
131	HTML	텍스트 상자에서 메세지가 타이핑 됩니다	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2808
130	HTML	오늘 날짜와 요일 넣기 [1]	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3685
129	HTML	창의 사이즈 변경 금지 시키기 [1]	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2748
128	HTML	손님의 방문 횟수를 알려 줍니다	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3339
127	HTML	자바스크립트 버튼에 링크 걸기	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	8595
126	HTML	이름을 물어보고 인사하는 스크립트	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2542
125	HTML	폼 버튼을 클릭하면 경고 메세지 보내기	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3007
124	HTML	포토샵 작업 중에 잘되던 한글 입력이 갑자기 안될때 있으시죠? [5]	두루굳센™ 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5356
123	HTML	버튼에 스타일주기(익스)	MCLUB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2929
122	HTML	오른쪽마우스클릭시메뉴(익스전용)	MCLUB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2838
121	HTML	오른쪽마우스클릭시메뉴(익스전용)	MCLUB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3436
120	HTML	영카트에서 카테고리 검색하기	rolo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3201
119	HTML	자바스크립트로 url 획득	MCLUB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3186
118	HTML	포샾 팁강좌입니다...퍼온 것입니다. [3]	버섯도리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5072
117	HTML	투명도조절 [2]	MCLUB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3648
116	HTML	textarea에 입력된 길이만큼 게이지로 표현	유자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3507
115	HTML	버튼 하나로 링크두개를 열어보자	유자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3899
114	HTML	[펌]다중 업로드	강강술냄세 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3858
113	HTML	포토샵에서 제가 간단하게 쓰는 점선 쓰는 방법입니다 [5]	yunni 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5283
112	HTML	register_globals = on /off 차이점	드렁크수달스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3614
111	HTML	밑의 갤러리 압축 화일 [4]	진아맘 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4092
110	HTML	getElementById와 getElementsByName	드렁크수달스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3522
109	HTML	[소개] smtp를 이용하여 mail 보내기	rolo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4864
108	HTML	cart클래스2	홀로남은자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2979