-
CANVAS 연습3(그라데이션)게임/HTML 연습 2018. 6. 23. 16:43반응형<!DOCTYPE html><html><head><meta charset = "UTF-8"><title>CANVAS연습3</title></head><body><canvas id="myCanvas" width="800" height="800" style="border: 1px dotted blue"></canvas>
<script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");//Gradient로 내부 채우기var grad = ctx.createLinearGradient(50,50,250,50);//context.createdLinearGradient(x0(시작하는 점의 x좌표), y0(시작하는 점의 y좌표), x1(끝나는 점의 x좌표), y1(끝나는 점의 y좌표))grad.addColorStop(0, "red"); //색 지정grad.addColorStop(1/6,"orange");grad.addColorStop(2/6,"yellow");grad.addColorStop(3/6,"green");grad.addColorStop(4/6,"aqua");grad.addColorStop(5/6,"blue");grad.addColorStop(1,"purple");ctx.lineWidth = 5;ctx.fillStyle= grad; //그라데이션 색을 지정한 변수를 fillStyle에 대입ctx.fillRect(50,50,200,200);ctx.strokeRect(50,50,200,200);
//radial gradient로 내부 채우기var grad2 = ctx.createRadialGradient(300,300,0,400,400,300);//creataRadialGradient(x0, y0, r0, x1, y1, r1);//x0: 시작하는 점의 x좌표, y0:시작하는 점의 y좌표, r0: 시작하는 곳의 반지름//x1:끝나는 점의 x좌표 y1: 끝나는 점의 y좌표, r1: 끝나는 곳의 반지름grad2.addColorStop(0, "red"); //색 지정grad2.addColorStop(0.5, "purple");grad2.addColorStop(1, "blue");ctx.lineWidth = 5;ctx.fillStyle = grad2;ctx.fillRect(300,300,300,300);ctx.strokeRect(300,300,300,300);</script></body></html>결과:
반응형'게임 > HTML 연습' 카테고리의 다른 글
CANVAS 연습6(글씨 쓰기) (0) 2018.06.25 CANVAS 연습5(이미지 그리기) (0) 2018.06.25 CANVAS 연습4(이미지 반복) (0) 2018.06.24 CANVAS 연습2(사각형, 원) (0) 2018.06.22 CANVAS 연습1(선 그리기) (0) 2018.06.21