HTML5 Canvas Draw Linear Gradient

컴프

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

· 8년 전 · 조회 2296 2296

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

글쓰기

번호	분류	제목	글쓴이	날짜	조회
767		신입 개발 ->디자인 ->퍼블로 왔습니다! [4]	웹표준3년차 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	3958
766		jQuery Tree 를 만들었습니다.~~ [2]	kiplayer 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	2879
765		퍼블리셔 수습기간인데 질문드립니다. [12]	DavidCorleone 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	4010
764	기타	swip 사용 안하고, touchstart, touchmove 사용하여 슬라이드 구현 [1]	돼지코구뇽 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	4686
763	기타	많이들 사용하시는 Slider 에 대해서... [3]	kiplayer 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	9537
762	기타	텝메뉴 상단고정 및 해당위치 스크롤 [5]	표블리셔 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	9101
761	기타	유튜브 재생 중인 팝업 레이어 숨길 때 재생 멈추는 방법 [2]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	8791
760	반응형	반응형 코딩할때 height:100% 에 관해서... [3]	ABC디자인 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	12948
759	기타	ie 와 크롬 폰트 부분해결할 수 있는건지좀 알려주시면 감사드립니다. [1]	바른통남 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	3988
758	CSS	당신은 모를 수도 있는 CSS의 7가지 단위 [4]	JRevirthuum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	6001
757	HTML	모바일 작업시 숫자인식,메일주소, 지도상의 주소링크 막기	임예니 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	3925
756	기타	구글의 material design에 관한 설명입니다. [4]	JRevirthuum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	4806
755	CSS	css가 충돌이 됬을때 [4]	돼지코구뇽 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	15859
754	HTML	HTML Canvas 2D Context	RINIX 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	6133
753	HTML	HTML5 자바스크립트 API [1]	RINIX 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	4892
752	기타	ShadowDOM Visualizer	JRevirthuum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	6082
751	반응형	각 해상도별 테스트. [8]	LaRuota 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	7235
750	HTML	결제모듈과 구글웹사이트 번역 엘리먼트	박쥐12 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	7953
749	HTML	팁] 모바일에서 문자보내기 [2]	카츠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	7418
748	반응형	짧고 굵은거 [1]	옵션 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	6722
747	반응형	반응형 가변(가로, 세로) 아이프레임 제이쿼리 플러그인 [13]	묵공 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	12341
746	기타	계륵.. css3, jquery 를 이용한 랜덤 돌림판 포인트게임	뽁스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	13536
745	CSS	익스8이하에서 css3을 사용하기 [3]	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	6449
744	CSS	레이어팝업 가로 중앙 위치 시키기 [3]	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	12346
743	기타	ie8에 font awesome 적용 방법 [6]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	7904
742	HTML	팁]모바일에서 전화 걸기 [1]	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	6579
741	기타	파비콘 넣는 방법이에요. [1]	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	6935
740	CSS	css !important 의 활용 [3]	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	6401
739	CSS	sprite 이미지를 css코드로 변환해주는 웹도구 [3]	우산11 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	5734
738	기타	영역 스크롤 질문드립니다. [1]	별이님 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	3623