HTML5 Canvas Draw Linear Gradient

컴프

프로필 보기 이 회원 글보기

· 8년 전 · 조회 2292 2292

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>

댓글 작성

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

로그인하기

게시글 목록

번호	제목	글쓴이	조회	날짜
2952	HTML zencoding	IAMA	1,570	8년 전
2951	HTML 정렬되지 않은 HTML 목록 ul li	컴프	2,308	8년 전
2950	HTML html table 2	컴프	2,101	8년 전
2949	HTML HTML Table 1	컴프	1,918	8년 전
2948	HTML HTML 파일 경로	컴프	2,418	8년 전
2947	HTML HTML <script> 태그	컴프	1,955	8년 전
2946	HTML Iframe 구문	컴프	2,571	8년 전
2945	HTML html 하이퍼링크2	컴프	2,576	8년 전
2944	HTML html 하이퍼링크 1	컴프	2,502	8년 전
2943	HTML HTML comment 태그	컴프	1,705	8년 전
2942	HTML HTML abbr address cite bdo	컴프	1,700	8년 전
2941	HTML HTML <code> For Computer Code	컴프	1,442	8년 전
2940	HTML HTML Computer Code Elements	컴프	1,467	8년 전
2939	HTML 짧은 인용문을위한 HTML	컴프	2,060	8년 전
2938	HTML HTML 서식 예제	컴프	1,673	8년 전
2937	HTML HTML 서식 요소	컴프	1,742	8년 전
2936	HTML Emmet 코딩시간을 단축시켜주는....	IAMA	1,753	8년 전
2935	HTML HTML 줄 바꿈	컴프	2,391	8년 전
2934	HTML The HTML <head> Element	컴프	1,783	8년 전
2933	HTML Headings 에 중요성	컴프	2,189	8년 전
2932	HTML HTML 스타일 속성	컴프	1,964	8년 전
2931	HTML HTML <pre> 요소	컴프	1,992	8년 전
2930	HTML HTML 줄 바꿈	컴프	1,935	8년 전
2929	CSS CSS를 삽입하는 3 가지 방법	컴프	2,333	8년 전
2928	CSS CSS 코멘트 삽입	컴프	2,243	8년 전
2927	CSS CSS 기본 문법	컴프	2,331	8년 전
2926	HTML HTML addr	컴프	1,947	8년 전
2925	HTML HTML 서식 요소	컴프	1,806	8년 전
2924	기타 디바이스별 해상도	컴프	2,365	8년 전
2923	HTML HTML 이미지 img 태그	컴프	1,992	8년 전

이전 다음

14 15 16 17 18

전체 목록

강좌