666
No
arc.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
canvas=document.getElementById("myCanvas"); //도화지
context=canvas.getContext("2d"); //붓
context.beginPath(); //경로 초기화
// 원점의 x,y좌표, 반지름, 시작각도, 끝각도, 회전방향
// 회전방향 : false(시계방향), true(반시계방향)
// 2.0 * Math.PI 360도, 1.0 * Math.PI 180도
// 1.5 * Math.PI 270도
context.arc(100,100,80,0,1.0*Math.PI, true);
context.fillStyle = "red"; //색상 설정
context.fill(); //색칠
context.beginPath();
context.arc(100,100,60,0,1.5*Math.PI, false);
context.fillStyle = "blue";
context.fill();
context.beginPath();
context.arc(100,100,40,0,1.5*Math.PI, false);
context.fillStyle = "green";
context.fill();
</script>
</body>
</html>
ball.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
canvas {
background-color: yellow;
border: 1px dotted black;
}
</style>
<script>
//전역변수
var context;
var dx = 5; //x증가값
var dy = 5; //y증가값
var y = 100; //시작좌표
var x = 100; //시작좌표
function draw() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//캔버스 지우기, 사각영역 지우기
context.clearRect(0, 0, 300, 200);
context.beginPath();
context.fillStyle = "red";
// 원그리기 x,y,반지름,시작각도,끝각도,반시계방향
context.arc(x, y, 10, 0, Math.PI * 2, true);
context.closePath();
context.fill();
if (x < (0 + 10) || x > (300 - 10)) { //좌우 벽처리
dx = -dx; //방향 전환 효과
}
if (y < (0 + 10) || y > (200 - 10)) { //상하 벽처리
dy = -dy; //방향 전환 효과
}
x += dx; // x좌표 이동
y += dy; // y좌표 이동
}
//setTimeout(draw, 10);
setInterval(draw, 10); //10 밀리세컨드마다 반복호출
// x,y축 이동거리를 변경하는 함수
function change() {
// parseInt( 스트링 ) 스트링을 숫자로 바꿔주는 함수
dx = parseInt(document.getElementById("hSpeed").value);
dy = parseInt(document.getElementById("vSpeed").value);
}
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<form id="form1">
x축 이동거리
<input type="number" id="hSpeed" value="5" min="1" max="10">
y축 이동거리
<input type="number" id="vSpeed" value="5" min="1" max="10">
<input type="button" value="확인" onclick="change()">
</form>
</body>
</html>
canvas.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 캔버스 태그(도화지에 해당) -->
<canvas id="myCanvas" width="200" height="100"
style="border: 1px solid red;">
</canvas>
<script>
canvas = document.getElementById("myCanvas");//캔버스객체
context = canvas.getContext("2d"); //컨텍스트 객체(붓)
context.fillStyle = "#ffff00";//색상 설정
// x,y,width,height
//context.fillRect(0,0,100,50);//사각형 그리기
context.rect(0,0,100,50);//사각형 그리기
context.strokeStyle = "green"; //테두리 색상
context.stroke(); //테두리 그리기
</script>
</body>
</html>
gra1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
// (0,0)좌표부터 (200,0) 좌표까지 점진적으로 색상이 변화
gradient = context.createLinearGradient(0,0,200,0);
gradient.addColorStop(0,"yellow"); //시작 색상
gradient.addColorStop(0.5,"red");
gradient.addColorStop(1,"blue"); //끝 색상
context.fillStyle=gradient; // 페인트 색상 설정
context.fillRect(10,10,180,90); //사각형 출력
</script>
</body>
</html>
gra2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
canvas= document.getElementById("myCanvas");
context = canvas.getContext("2d");
context.arc(70,50,10,0,2.0*Math.PI, false);
context.arc(80,60,120,0,2.0*Math.PI, false);
context.stroke();
//원형 그라데이션 효과
// x1,y1,r1, x2,y2,r2
gradient =
context.createRadialGradient(70,50,10,80,60,120);
gradient.addColorStop(0,"white");
gradient.addColorStop(1,"red");
context.fillStyle=gradient; //페인트 스타일 지정
context.fillRect(0,0,200,200); // 사각형 출력
</script>
</body>
</html>
image.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- <img id="img" src="../images/tomato.jpg" onload="alert('이미지가 화면에 출력되었습니다.')"> -->
<!-- <img id="img" src="../images/apple.gif" onload="" > -->
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
canvas=document.getElementById("myCanvas");
context=canvas.getContext("2d");
image=new Image(); //이미지 객체 생성
image.src = "../images/tomato.jpg"; //이미지 소스 지정
//이미지가 로딩되면 캔버스에 이미지 출력
image.onload = function(){
context.drawImage(image,0,0);
};
/* img = document.getElementById("img");
img.onload = function(){
alert("이미지가 로딩되었습니다.");
} */
</script>
</body>
</html>
line.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function test(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.setLineDash([5,5]); //선 크기, 공백 크기
context.strokeStyle = "green";
context.beginPath(); //경로 초기화
context.moveTo(0,0); //좌표 이동
context.lineWidth = 20; //선의 두께
context.lineTo(100,100); //선 그리기
context.stroke(); //선이 그려짐
context.lineWidth = 10;
context.beginPath();
context.moveTo(100,100);
context.strokeStyle = "red";
context.lineTo(150,50);
context.lineTo(200,100);
context.stroke();
}
</script>
</head>
<body onload="test()">
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
text.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
canvas = document.getElementById("myCanvas"); //도화지
context = canvas.getContext("2d"); //붓
context.font = "italic 40pt Arial"; //폰트 설정
//context.strokeStyle = "blue"; //텍스트 색상 설정
//context.strokeText("Hello World", 20, 100);//텍스트 출력
context.fillStyle = "red";
context.fillText("Hello World", 20, 100);//텍스트 출력
</script>
</body>
</html>
댓글 ( 4)
댓글 남기기