데카르트 좌표계, Canvas 캔버스 그리기

1.데카르트 좌표계

데카르트 좌표계(영어: Cartesian coordinate system)는 임의의 차원의 유클리드 공간(혹은 좀 더 일반적으로 내적 공간)을 나타내는 좌표계 중 하나.

직교 좌표계(直交座標系, 영어: orthogonal coordinate system)는 데카르트 좌표계를 포함하여 극좌표계, 원통좌표계, 구면좌표계 등 좌표축과 평행한 단위벡터끼리 항상 서로 수직한 모든 좌표계를 총칭하는 표현.

데카르트 좌표계는 나타내는 대상이 평행 이동에 대한 대칭을 가질 때 유용하나, 회전 대칭 등 다른 꼴의 대칭은 쉽게 나타내지 못한다. 일반적으로 주어진 유클리드 공간에 기저와 원점이 주어지면 이를 이용하여 데카르트 좌표계를 정의할 수 있다. 가장 흔하게 볼 수 있는 좌표평면이나 좌표공간의 경우, 데카르트 좌표를 통상적으로 라틴 문자 x, y, z로 적는다. 4차원인 경우, w나 (물리학에서 시공을 다루는 경우) t를 쓴다. 임의의 차원의 경우에는 첨자로 xn의 꼴로 쓴다. 특히 좌표평면은 집합의 정보, 함수의 정보, 다항식의 정보, 행렬의 정보들을 한 공간에서 표현할 수 있는 정보의 통일된 규칙이 적용된다는 점에서 중요한 의미가 있다. 또한 이러한 데카르트 좌표계의 정보는 고차원의 데카르트 좌표계뿐만 아니라 다른 좌표계의 정보로 확장될 수 있어 더욱 중요한 의미를 가지며 지금까지도 계속해서 쓰이고 있다.

2.캔버스 그리기

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

#myCanvas {

border: 1px solid red;

}

</style>

</head>

<body>

// var canvas = document.getElementById("myCanvas");

// var ctx = canvas.getContext("2d");

// ctx.moveTo(30, 30); //시작하는 지점

// ctx.lineTo(70, 70);// 끝나는 지점.

// ctx.stroke();// 그리다

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

ctx.beginPath();

ctx.arc(95,50,40,0,0.5*Math.PI); //가로, 세로, 반지름길이,

ctx.stroke();

ctx.moveTo(95,50);

ctx.lineTo(135,50);

ctx.stroke();

ctx.moveTo(95,50);

ctx.lineTo(95,90);

ctx.stroke();

ctx.font = "30px Arial";

ctx.fillText("Hello World", 10,30);

</script>

</body>

</html>

3.점찍기

<!DOCTYPE html>

<head>

<style>

* {

margin: 0;

padding: 0;

}

#myCanvas {

border: 1px solid red;

}

</style>

</head>

<body>

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

function plotXY(x,y) {

ctx.moveTo(x-1,y-1);

ctx.lineTo(x,y);

ctx.stroke();

}

plotXY(150,15);

</script>

</body>

</html>

4.x,y 좌표 찍기

<!DOCTYPE html>

<head>

<style>

* {

margin: 0;

padding: 0;

}

#myCanvas {

border: 1px solid red;

}

</style>

</head>

<body>

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

function plotXY(x,y) {

ctx.moveTo(x-1,y-1);

ctx.lineTo(x,y);

ctx.stroke();

}

for(let correctXY=0; correctXY<=300; correctXY++){

plotXY(150,correctXY);

plotXY(correctXY,150);

}

function modifyXY(x,y) {

x = 150+x;

y = 150-y;

plotXY(x,y);

}

modifyXY(50,-10);

modifyXY(-45,-50);

modifyXY(80,100);

</script>

</body>

</html>

5.2차방정식 그리기

<!DOCTYPE html>

<head>

<style>

* {

margin: 0;

padding: 0;

}

#myCanvas {

border: 1px solid red;

}

</style>

</head>

<body>

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

function plotXY(x,y) {

ctx.moveTo(x-1,y-1);

ctx.lineTo(x,y);

ctx.stroke();

}

for(let correctXY=0; correctXY<=300; correctXY++){

plotXY(150,correctXY);

plotXY(correctXY,150);

}

function modifyXY(x,y) {

x = 150 + x;

y = 150 - y;

plotXY(x,y);

}

//1차 방정식 y=3x+2

for(x=-150; x<=150; x++){

modifyXY(x,3*x+2);

}

//2차 방정식 y=0.2x제곱 +2

for(x=-150; x<=150; x=x+0.1){

modifyXY(x,0.2*x**2+2);

}

// -x+5

for(x=-150; x<=150; x++){

modifyXY(x,-x+5);

}

</script>

</body>

</html>

6.값을 입력받아 사각형 그리고 색깔표시하기

<!DOCTYPE html>

<head>

<style>

* {

margin: 0;

padding: 0;

}

#myCanvas {

border: 1px solid red;

}

/* .drawRectangle {

background-color: aquamarine;

} */

</style>

</head>

<body>

let myPen = document.querySelector("#myCanvas").getContext("2d");

function moveXY(midLine, locX1, locY1, locX2, locY2) {

myPen.moveTo(midLine + locX1, midLine - locY1);

myPen.lineTo(midLine + locX2, midLine - locY2);

}

moveXY( 150, 0, 150, 0, -150 ); //y축

moveXY( 150, -150, 0, 150, 0 ); //x축

function drawRectangle(x1, y1, x2, y2, x3, y3, x4, y4) {

myPen.clearRect(0,0,300,300); //캔버스 초기화

myPen.beginPath();// 경로 초기화

myPen.moveTo(150+x1, -y1);

myPen.lineTo(150+x2, -y2);

myPen.lineTo(150+x3, -y3);

myPen.lineTo(150+x4, -y4);

myPen.closePath(); // 도형의 경로를 닫기

myPen.fillStyle = "rgba(0, 0, 255, 0.5)"; // 사각형의 색상 지정

myPen.fill(); // 사각형을 채우기

myPen.stroke();

}

let x1 = parseInt(prompt("첫 번째 점의 x 좌표를 입력하세요."));

let y1 = parseInt(prompt("첫 번째 점의 y 좌표를 입력하세요."));

let x2 = parseInt(prompt("두 번째 점의 x 좌표를 입력하세요."));

let y2 = parseInt(prompt("두 번째 점의 y 좌표를 입력하세요."));

let x3 = parseInt(prompt("세 번째 점의 x 좌표를 입력하세요."));

let y3 = parseInt(prompt("세 번째 점의 y 좌표를 입력하세요."));

let x4 = parseInt(prompt("네 번째 점의 x 좌표를 입력하세요."));

let y4 = parseInt(prompt("네 번째 점의 y 좌표를 입력하세요."));

drawRectangle(x1, y1, x2, y2, x3, y3, x4, y4);

</script>

</body>

</html>

7.캔버스로 이미지 삽입하기

<!DOCTYPE html>

<html>

<body>

<img id="scream" width="220" height="277"

src="./img/son1.jpeg" alt="Son">

<p>Canvas:</p>

<canvas id="myCanvas" width="240" height="297"

style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.

</canvas>

window.onload = function() {

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

var img = document.getElementById("scream");

ctx.drawImage(img, 10, 10);

};

</script>

</body>

</html>

8. 마지막 점으로 2차원 방정식을 찍고 해당 점들을 선으로 연결하기

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

#myCanvas {

border: 1px solid red;

text-align: center;

}

</style>

</head>

<body>

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

for(let correctXY=0; correctXY<=600; correctXY++){

plotXY(300,correctXY);

plotXY(correctXY,300);

}

//점 그리는 함수

function plotXY(x,y) {

ctx.beginPath();

ctx.moveTo(x-1,y-1); //이전 점의 위치 설정

ctx.lineTo(x,y); // 현재 점의 위치 설정

ctx.stroke();

}

//좌표 변환 함수

function modifyXY(x,y) {

x = 300 + x; // 중앙이동

y = 300 - y; // 중앙이동

// plotXY(x,y);

return [x,y];

}

//2차 방정식 y=0.2x제곱 점으로 구현

let pointValue = [];

for(x=-300; x<=300; x=x+1){

// modifyXY(x,0.2*x**2+2);

let y = x**2;

pointValue.push(modifyXY(x,y));

}

//점을 선으로 연결하는 함수

function connectDots(pointValue) {

ctx.beginPath();

ctx.moveTo(pointValue[0][0], pointValue[0][1]);

for(let i=0; i<pointValue.length; i++) {

let x = pointValue[i][0];

let y = pointValue[i][1];

ctx.lineTo(x,y);

}

ctx.stroke();//선그리기

}

connectDots(pointValue);// 점들을 선으로 연결하여 그리기

</script>

</body>

</html>

저작자표시 (새창열림)

'Javascript' 카테고리의 다른 글

제너레이터, 이뉴머레이터, 캔버스(Canvas) 사용하여 3차원 곡선, 그래프 이동 구현하기 (0)	2023.07.27
과목별 학생 평균 데이터 출력, 다이아몬드 만들고 객체화 (0)	2023.07.26
큐를 활용하여 데이터 자료구조 변경하기 (0)	2023.07.21
filter활용-파이썬반 평균점수 구하기 (0)	2023.07.20
특정 과목 점수대별 인원수 구하기 / getter와setter 활용하여 과목별 평균 구하기 (0)	2023.07.19

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

열정을 담아

데카르트 좌표계, Canvas 캔버스 그리기

'Javascript' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

데카르트 좌표계, Canvas 캔버스 그리기

'Javascript' 카테고리의 다른 글

관련글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역