sitelink1 | http://blog.naver.com/shadowbug/220741554383 |
---|---|
sitelink2 | |
sitelink3 | |
sitelink4 | |
extra_vars5 | |
extra_vars6 |
주요 함수
|
설명 |
createLinearGradient(x1, y1, x2, y2) |
(x1, y1) (x2, y2)의 사각형을 그라디언트로 그린다. |
createRadialGradient(x1, y1, r1, x2, y2, r2) |
두 원 (x1, y1, r1), (x2, y2, r2) |
Linear Gradient
일반적인 선형 그라디언트를 그린다.
javascript
배경색 속성에 그라디언트를 세팅한다.
-
function draw(target) {
-
var canvas = document.getElementById("draw");
-
-
// 지원 여부 체크
-
if (canvas.getContext) {
-
// HTML5에서 canvas를 지원시
-
-
// 그리기 오브젝트를 받음
-
var ctx = canvas.getContext('2d');
-
-
// 선형 그라디언트 생성
-
var grd = ctx.createLinearGradient(0,0,200,0);
-
grd.addColorStop(0,"red");
-
grd.addColorStop(1,"white");
-
-
// 배경 스타일을 그라디언트로 설정한다.
-
ctx.fillStyle = grd;
-
ctx.fillRect(10,10,150,80);
-
}
-
}
결과
Circular Gradient
원형 그라디언트를 그린다.
API에 대한 상세 내용은 아직 필자도 파악을 다 하지 못했다.
-
function draw(target) {
-
var canvas = document.getElementById("draw");
-
-
// 지원 여부 체크
-
if (canvas.getContext) {
-
// HTML5에서 canvas를 지원시
-
-
// 그리기 오브젝트를 받음
-
var ctx = canvas.getContext('2d');
-
-
// 원형 그라디언트 생성
-
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
-
grd.addColorStop(0,"red");
-
grd.addColorStop(1,"white");
-
-
// Fill with gradient
-
ctx.fillStyle = grd;
-
ctx.fillRect(10,10,150,80);
-
}
-
}
결과
댓글 0
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
65 | Canvas 비트맵 그리기 | 황제낙엽 | 2016.08.22 | 42 |
» | Canvas 그라디언트 그리기 | 황제낙엽 | 2016.08.22 | 38 |
63 | Canvas 텍스트 그리기 | 황제낙엽 | 2016.08.22 | 20 |
62 | Canvas 곡선 그리기 | 황제낙엽 | 2016.08.22 | 424 |
61 | Canvas 다각형 그리기 | 황제낙엽 | 2016.08.22 | 111 |
60 | Canvas 사각형 그리기 | 황제낙엽 | 2016.08.22 | 30 |
59 | Canvas 시작하기 | 황제낙엽 | 2016.08.22 | 23 |
58 | HTML5 개발을 도와주는 도구들 | 황제낙엽 | 2014.04.04 | 41 |
57 | encoding, charset, code page, UTF-8, UNICODE ... | 황제낙엽 | 2013.08.07 | 731 |
56 | document.domain (from mozilla.org) | 황제낙엽 | 2013.03.13 | 407 |
55 | 우리은행 웹 접근성 가이드 | 황제낙엽 | 2013.03.08 | 86 |
54 | 모든 브라우저에서 동작하는 opacity 설정 코드 | 황제낙엽 | 2013.02.14 | 67 |
53 | DXImageTransform.Microsoft.AlphaImageLoader 와 file dialog | 황제낙엽 | 2013.01.28 | 142 |
52 | Gradient 와 Background-Image 동시 적용 방안 | 황제낙엽 | 2013.01.11 | 117 |
51 | 그라디언트와 다중 배경 (gradient) | 황제낙엽 | 2013.01.11 | 52 |
50 | CSS Gradient Background Maker | 황제낙엽 | 2013.01.11 | 25 |
49 | Radius, Gradient, Padding | 황제낙엽 | 2013.01.11 | 74 |
48 | 스타일-보더 테스트 관련 레퍼런스 | 황제낙엽 | 2013.01.04 | 248 |
47 | Vector Markup Language | 황제낙엽 | 2012.12.20 | 28 |
46 | ScrollBar의 출력형태 | 황제낙엽 | 2012.09.14 | 54 |