카테고리 없음

웹프

Ynghan 2023. 6. 12. 15:56

 

약자


4. 캔버스와 svg 차이

svg는 html로 작성하고 canvas는 자바스크립트로만 작성된다.

 

캔버스는 HTML 페이지의 직사각형 영역입니다.
기본적으로 캔버스에는 테두리도 없고 콘텐츠도 없습니다.

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>

</body>
</html>

자바스크립트 추가하기

  • 직사각형 캔버스 영역을 만든 후에는 그림을 그리기 위해 JavaScript를 추가해야 합니다.
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

</body>
</html>

beginPath()

  • 캔버스에 두 개의 경로(녹색과 보라색)를 그립니다:
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.beginPath();              
ctx.lineWidth = "5";
ctx.strokeStyle = "green";  // Green path
ctx.moveTo(0, 75);
ctx.lineTo(250, 75);
ctx.stroke();  // Draw it

ctx.beginPath();
ctx.strokeStyle = "purple";  // Purple path
ctx.moveTo(50, 0);
ctx.lineTo(150, 130);            
ctx.stroke();  // Draw it
</script>

</body>
</html>

Draw a Circle

  • 캔버스에 원을 그리려면 다음 메서드를 사용합니다:
  • beginPath() - 경로를 시작합니다.
  • arc(x,y,r,시작각,끝각) - 호/커브를 만듭니다.
  • arc()로 원을 만들려면 다음과 같이 하세요: 시작 각도를 0으로 설정하고 끝 각도를 2*Math.PI로 설정합니다.
  • x 및 y 매개 변수는 원의 중심을 정의합니다.
  • r 매개 변수는 원의 반지름을 정의합니다.
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script> 

</body>
</html>

JavaScript Timing Events

Timing Events

  • 창 객체를 사용하면 지정된 시간 간격으로 코드를 실행할 수 있습니다.
  • 이러한 시간 간격을 타이밍 이벤트라고 합니다.
  • 자바스크립트에서 사용할 수 있는 두 가지 주요 메서드는 다음과 같습니다:
    • setTimeout(함수, 밀리초)
      • 지정된 시간(밀리초) 동안 기다린 후 함수를 실행합니다.
    • setInterval(함수, 밀리초)
      • setTimeout()과 동일하지만 함수 실행을 계속 반복합니다.

setTimeout() 메서드

  • window.setTimeout() 메서드는 window 접두사 없이 작성할 수 있습니다.
  • 1초 = 1000밀리초

setInterval() 메서드

  • setInterval() 메서드는 지정된 시간 간격마다 지정된 함수를 반복합니다.
window.setInterval(function, milliseconds);
  • 현재 시간을 표시합니다:
setInterval(myTimer, 1000);

function myTimer() {
  const d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

How to Stop the Execution?

  • clearInterval() 메서드는 setInterval() 메서드에 지정된 함수의 실행을 중지합니다.
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>A script on this page starts this clock:</p>

<p id="demo"></p>

<button onclick="clearInterval(myVar)">Stop time</button>

<script>
let myVar = setInterval(myTimer ,1000);
function myTimer() {
  const d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

</body>
</html>

 

SVG Graphics

  • SVG는 벡터 기반 그래픽을 XML 형식으로 정의합니다.
  • SVG는 Canvas가 아닌 HTML의 요소로 그림을 그린다.
    • 요소란 의미는 <h1> <button> 과 동일한 종류라는 의미!

What is SVG?

  • SVG는 Scalable Vector Graphics의 약자입니다.
  • SVG는 웹용 그래픽을 정의하는 데 사용됩니다.
  • SVG는 W3C 권장 사항입니다.

The HTML <svg> Element

  • HTML <svg> 요소는 SVG 그래픽을 위한 컨테이너입니다.
  • SVG에는 경로, 상자, 원, 텍스트 및 그래픽 이미지를 그리는 여러 가지 방법이 있습니다.

SVG Circle

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40"
  stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
 
</body>
</html>

SVG Rectangle

<!DOCTYPE html>
<html>
<body>

<svg width="400" height="100">
  <rect width="400" height="100" 
  style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
Sorry, your browser does not support inline SVG.
</svg>
 
</body>
</html>

SVG RoundRectangle

<!DOCTYPE html>
<html>
<body>

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>

SVG와 Canvas의 차이점

  • SVG는 2D 그래픽을 XML로 설명하는 언어입니다.
  • 캔버스는 자바스크립트를 사용하여 2D 그래픽을 즉석에서 그립니다.
  • SVG는 XML 기반이므로 모든 요소를 SVG DOM 내에서 사용할 수 있습니다.
    • 요소에 JavaScript 이벤트 핸들러를 첨부할 수 있습니다.
    • SVG에서는 그려진 각 도형이 하나의 객체로 기억됩니다.
    • SVG 객체의 속성이 변경되면 브라우저는 자동으로 모양을 다시 렌더링할 수 있습니다.
  • 캔버스는 픽셀 단위로 렌더링됩니다.
    • 캔버스에서는 그래픽이 그려지면 브라우저에서 해당 그래픽이 잊혀집니다.
    • 위치를 변경해야 하는 경우 그래픽에 가려졌을 수 있는 모든 개체를 포함하여 전체 장면을 다시 그려야 합니다.

캔버스와 SVG의 비교

아래 표는 캔버스와 SVG의 몇 가지 중요한 차이점을 보여줍니다:
Canvas  SVG
• 해상도에 따라 다름 • 해상도 독립적
• 이벤트 핸들러 미지원 • 이벤트 핸들러 지원
• 텍스트 렌더링 기능 불량 • 렌더링 영역이 넓은 애플리케이션에 적합(Google 지도)
• 결과 이미지를 .png 또는 .jpg로 저장할 수 있습니다. • 복잡한 경우 렌더링 속도가 느림(DOM을 많이 사용하는 모든 것이 느림)
• 그래픽 집약적인 게임에 적합 • 게임 애플리케이션에 적합하지 않음

 

5. 부트스트랩 구문 주고 해석

 

  • Q <div class="col-sm-6 bg-primary text-white p-3"> 해석
    • 컬럼으로 만든는데 6개의 크기 즉 절반 크기, 패딩은 중간(1~5)


6. HTTP 메소드 구분하는거 / 쿠키 스토리지 / SPA MPA / 비동기 원리 / 모듈 / 디스트럭쳐


7. 노드 JS


8. 리액트

 

저작자표시 (새창열림)