//그라데이션만들기
원형
<body>
<canvas id="canvas" width="200" height="200" style="border: 2px solid black;"></canvas>
<script>
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let gradient = ctx.createRadialGradient(110,90,30, 100,100,70);
//createRadialGradient(x0,y0,r0,x1,y1,r1)
x0 :시작 원의 x축 좌표
y0 : 시작 원의 Y 축 좌표
r0 : 시작 원의 반지름.음성이면 안된다
x1 : 끝 원의 x축 좌표
y1 : 끝 원의 Y 축 좌표
r1 : 끝 원의 반지름 음성이면 안된다
gradient.addColorStop(0, 'blue'); //addColorStop : 그라이데이션의 색상위치지정(위치값,"색값")
gradient.addColorStop(.9, 'white');
gradient.addColorStop(1, 'yellow');
ctx.fillStyle = gradient; // 위의 색채움
ctx.fillRect(20, 20, 160, 160); // 사각형색채움
</script>
</body>
//선형
<body>
<canvas id="canvas" width="200" height="200"
style="border: 2px solid black;"></canvas>
<script>
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let gradline = ctx.createLinearGradient(0,0,100,135 );
//createLinearGradient(x0,y0,x1,y1) 지정된 좌표에 지정된 선을 따라 선형 그라데이션을 만든다
x0: 시작점의 x축 좌표
y0: 시작점의 y축 좌표
x1: 끝점의 x축 좌표
y1: 끝점의 Y 축 좌표
gradline.addColorStop(0, 'blue'); //(위치값,"색값")
gradline.addColorStop(1, 'white');
ctx.fillStyle = gradline;
ctx.fillRect(0, 0, 140, 100);
</script>
</body>
//선형그라디언트로 rect지정
<body>
<canvas id="myCanvas" width="300" height="200"
style="border: 3px solid black;"></canvas>
<!--값저장변수필요let값저장메모리에다저장ctrl delete 에저장-->
<script>
let paper = document.getElementById("myCanvas");
let context = paper.getContext("2d");
let grdline = context.createLinearGradient(0,200,150,200);
grdline.addColorStop(0,"blue"); //(위치,"색")
grdline.addColorStop(1,"yellow");
context.strokeStyle = grdline;
context.rect(20,20, 150, 70);//fillRect는 사각형 채워주는거고 rect는 사각형선만 지정된다
context.stroke();
</script>
</body>
'HTML' 카테고리의 다른 글
| 파비콘(favicon) (0) | 2022.02.13 |
|---|---|
| svg (0) | 2022.02.13 |
| Canvas (0) | 2022.02.13 |
| object (0) | 2022.02.12 |
| html5 video /audio (0) | 2022.02.12 |