게임/HTML 연습
CANVAS 연습3(그라데이션)
런던전통손만두
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>
결과:
반응형