HTML5 Canvas Draw Linear Gradient

컴프

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

· 8년 전 · 조회 2301 2301

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

글쓰기

번호	분류	제목	글쓴이	날짜	조회
887	HTML	SVG Star	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2242
886	HTML	SVG Rounded Rectangle	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1784
885	HTML	SVG Rectangle	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2209
884	HTML	SVG Circle	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2262
883	HTML	HTML5 Canvas Draw Image	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2427
882	HTML	HTML5 Canvas Draw Circular Gradient	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2175
881	HTML	HTML5 Canvas Draw Linear Gradient 현재 보는 글	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2302
880	HTML	HTML5 Canvas Stroke Text [1]	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2628
879	HTML	HTML5 Canvas Draw a Text	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1725
878	HTML	HTML5 Canvas Draw a Circle	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1950
877	HTML	HTML5 Canvas Draw a Line	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1962
876	HTML	HTML5 Canvas	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2154
875	HTML	HTML5 <footer> 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1689
874	HTML	HTML5 <header> 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2719
873	HTML	html5 태그 정의	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2566
872	HTML	HTML5 <figure> 및 <figcaption> 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2615
871	HTML	HTML5 <aside> 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2929
870	HTML	HTML5 <nav> 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2200
869	HTML	HTML5의 새로운 시맨틱 요소 article	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2636
868	HTML	HTML5의 새로운 시맨틱 요소 section	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2154
867	HTML	Syntax For HTML5Shiv(구문 HTML5Shiv의 경우)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1931
866	HTML	The min and max Attributes(최소 및 최대 속성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1664
865	HTML	The list Attribute(list 속성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1921
864	HTML	The height and width Attributes(높이 및 너비 특성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2052
863	HTML	The formtarget Attribute(formtarget 속성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1350
862	HTML	The formnovalidate Attribute(formnovalidate 특성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1647
861	HTML	The formmethod Attribute(formmethod 속성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1612
860	HTML	The formenctype Attribute(formenctype 속성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1881
859	HTML	The step Attribute(step 속성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1536
858	HTML	The required Attribute(필수 속성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1831