HTML5 Canvas Draw Linear Gradient

컴프

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

· 8년 전 · 조회 2298 2298

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

글쓰기

번호	분류	제목	글쓴이	날짜	조회
707	CSS	ios 에서 input 스타일 초기화 [5]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	12402
706	기타	modern.ie 일종의 ie 테스터? [2]	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	5092
705	CSS	웹표준코딩에 필요한 지식 참고하세요. [5]	접신 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	5668
704	기타	크로스브라우징? 이제 크롬에서 하나로 확인하자 [18]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	12105
703	웹접근성	자바스크립트를 끈 로그인 폼 [15]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	10087
702	기타	HTML5 기반 에니메이션 제작을 위한 Adobe Edge [3]	흥힝힝 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	5146
701	CSS	IE6/7 img px 버그	daro 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3112
700	반응형	참고해서 만들어 본 반응형 레이아웃 [7]	kiplayer 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	6803
699	CSS	팁은 아닌데 그냥 제가 자주쓰는 버튼 css [5]	kiplayer 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	6426
698	웹접근성	html / css 버튼 만들어 주는 사이트. 자주 활용합니다^^; 편리성 [9]	돼지코구뇽 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	36930
697	HTML	IE6 PNG 초 간단하게 적용 [3]	daro 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	4343
696	HTML	HTML5 placeholder 사용하기 [1]	daro 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	8076
695	CSS	제가 사용하는 CSS RESET (초기화) [3]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	5452
694	HTML	<img> 태그 올 바르게 사용하기. [8]	daro 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	5815
693	CSS	모바일/테블릿의 @font-face 지원여부 [2]	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3885
692	웹접근성	웹접근성이란? [3]	프로프리랜서 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3775
691	웹접근성	웹표준형 화면 확대/축소 [8]	돼지코구뇽 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	12462
690	CSS	익스플로러에서 CSS3의 컬러속성을 필터로 사용하도록 변경해주는 사이트	port 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	4216
689	웹접근성	접근성을 고려한, 컨텐츠를 가리는 방법 [4]	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	5873
688	CSS	그라디언트 에디터 [7]	port 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	4925
687	HTML	파비콘(favicon) 만들어 넣기 [2]	port 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	7386
686	CSS	css를 이용한 2차 메뉴입니다. [7]	port 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	5840
685	기타	고수님들 사이트오류(레이어팝업) 좀 봐주세요 ㅠ.ㅠ [4]	황후인덕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	10611
684	HTML	object 태그 질문 드ㅡ립니다 [2]	후라보노보노 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4805
683	HTML	[HTML5] classList api 클래스 변경 api [1]	다프린 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4339
682	기타	필요에 따라 자스/css 불러왔다 내보내기 [3]	Maximus 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3517
681	CSS	가상클래스 순서 외우기 [3]	모노폴리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3663
680	HTML	넌 이제 오빠꺼야, embed 동영상 위의 div 표시문제 [8]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	6305
679	반응형	반응형웹 패턴/리소스/뉴스 [4]	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	6589
678	CSS	CSS에 attr 함수에 대해 [3]	다프린 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3814