* 본 포스팅은 제가 국비지원교육을 받으며 정리한 내용을 옮겨놓은 것입니다.
발전적인 지적과 피드백은 언제나 환영합니다!
Canvas #2
Shadow
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas(shadow)</title>
<style>
.can{
border:1px dashed #ff0000
}
</style>
</head>
<body>
<h3>Shadow</h3>
<canvas id='can1' class='can' width='300px' height='150px'></canvas>
<br/>
<form name='frm'>
<label>바탕색</label>
<input type='color' name='bgcolor'/>
<label>그림자색</label>
<input type='color' name='sdcolor'/>
<input type='button' value='확인' id='btnRun'/>
</form>
<script>
let btn = document.getElementById('btnRun');
btn.onclick=function(){ // onclick : 자바의 action performed 역할
let bc = frm.bgcolor.value; //frm의 bg태그가 가지고 있는 값 (value)
let sd = frm.sdcolor.value;
//alert(bc + "," + sd);
let canvas = document.getElementById('can1');
let ctx = canvas.getContext('2d');
ctx.fillStyle = bc;
ctx.shadowColor = sd;
ctx.shadowOffsetX='5';
ctx.shadowOffsetY='5';
ctx.shadowBlur='7';
ctx.fillRect(30,30,230,80);
}
</script>
</body>
</html>
Gradient
- createLinearGradient(x1, y1, x2, y2) : x1, y1 에서부터 x2, y2 까지 그라데이션
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>gradient</title>
<style>
.can{ border:2px solid #ffffff}
body{
background-color : #000000;
color : #ffffff;}
h3{
color : #ffffff;
}
</style>
</head>
<body>
<h3>선형 그라데이션</h3>
<canvas id='can1' class='can' width='300px' height='150px'></canvas>
<br/>
<form name='frm'>
<input type='color' name='fc' value='#ff0000'/>
<input type='color' name='sc' value='#00ff00'/>
<input type='color' name='tc' value='#0000ff'/>
<input type='button' value='선형' name='btnLinear'/>
</form>
<script>
frm.btnLinear.onclick = function(){
let fc = frm.fc.value;
let sc = frm.sc.value;
let tc = frm.tc.value;
let ctx = document.getElementById('can1').getContext('2d');
let gra = ctx.createLinearGradient(20,20,250,110);
gra.addColorStop(0, fc);
gra.addColorStop(0.5, sc);
gra.addColorStop(1, tc);
ctx.fillStyle = gra;
ctx.fillRect(20,20,250,110);
}
</script>
<h3>원형 그라데이션</h3>
<canvas id='can2' class='can' width='300px' height='300px'></canvas>
<br/>
<form name='frm2'>
<input type='color' name='fc' value='#ff0000'>
<input type='color' name='sc' value='#00ff00'>
<input type='color' name='tc' value='#0000ff'>
<input type='button' value='원형' name='btnRadial'/>
</form>
<script>
frm2.btnRadial.onclick = function(){
let fc = frm2.fc.value;
let sc = frm2.sc.value;
let tc = frm2.tc.value;
let ctx = document.getElementById('can2').getContext('2d');
let gra = ctx.createRadialGradient(150, 150, 15, 150, 150, 180, 150, 150, 200);
gra.addColorStop(0,fc);
gra.addColorStop(0.5, sc);
gra.addColorStop(1, tc);
ctx.fillStyle = gra;
ctx.fillRect(0,0,300,300);
}
</script>
</body>
</html>
Rotate
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>도형회전</title>
<style>
#can { border: 2px solid white}
body{
background-color : black;
color : white;
}
</style>
</head>
<body>
<h3>rotate</h3>
<canvas id='can' width='500px' height='500px'></canvas>
<br/>
<form name='frm'>
<label>도형의 갯수</label>
<input type='range' name='cnt' min='1' max='1000'/>
<output name='msg' value='1'></output>
</form>
<script>
let ctx = document.getElementById('can').getContext('2d');
ctx.translate(200,200);
frm.cnt.onchange=function(){
frm.msg.value = frm.cnt.value;
ctx.lineWidth='1';
ctx.strokeStyle='white';
ctx.clearRect(-250,-250,750,750)
for(i=0; i<frm.msg.value; i++){
let c = frm.msg.value;
ctx.rotate(Math.PI/180 * (360/c));
ctx.strokeRect(40, 40, 70, 70);
}
}
</script>
</body>
</html>
'Web 기초' 카테고리의 다른 글
| [Web] 웹 기초 (5) - CSS #1 사용법, 선택자, 가상클래스 (0) | 2022.05.10 |
|---|---|
| [Web] 웹 기초 (4) - Web Storage API (0) | 2022.05.09 |
| [Web] 웹 기초 (2) - Canvas #1 (0) | 2022.05.09 |
| [Web] 웹 기초 (1) - 기본적인 HTML 태그 (글꼴, 문단) (0) | 2022.05.09 |
| [Web] 웹 개발 환경구축 (2) - 이클립스 웹서버 환경설정, HTML 파일 생성 (0) | 2022.05.09 |
