HTML에서 캔버스를 사용하면 도형을 그릴 수 있습니다.
9867 단어 HTML초보자자바스크립트프로그래밍 공부 일기
프로그래밍 공부 일기
2020년 10월 8일
HTML로 이미지로 바꾸지 않고 도형을 그릴 수 있다는 것을 알았으므로 정리한다.
canvas 태그란?
도형을 그리기 위해서는 png나 jpeg 등의 이미지로 바꾸거나 Flash 등의 플러그인 데이터를 임베드하는 것이 일반적이었지만, HTML5에서 2D 그래픽을 그리는 <canvas> . canvas를 사용함으로써 표준 HTML과 JavaScript만으로 그래프나 게임 그래픽 등의 도형을 표시할 수 있게 되었다.
쓰기
canvas 태그는 다음과 같이 쓴다.
쓰기<canvas id="id名" width="canvasの横幅" height="canvasの縦幅">
</canvas>
하지만, 도형은 이것만으로는 표시되지 않는다. HTML의 부분과 JavaScript를 id명으로 관련지어, 그리는 도형을 지정한다. JavaScript 부분에서는 그리는 도형을 지정하기 전에 우선 캠퍼스를 사용할 준비가 필요하다.
그리기 컨텍스트 얻기var canvas = document.getElementById("id名");
var context = canvas.getContext("2d");
묘화 문맥의 취득의 1행에서는 getElementById 메소드를 사용해, HTML 문서내에서 id명을 지정한 요소를 의 부분을 참조하고 있다. (이것으로 취득한 오브젝트에 canvas라는 이름을 붙이고 있다.)
이 캔버스에 대해 캔버스에 액세스하기 위한 메소드이다 getContext 메소드(canvas를 조작할 때는 반드시 필요)를 실행하고 있다.
2행째에서는 getContext("2d") 로 문맥명을 지정하고 있다. 현재는 이 메소드에서는 2d 만이 서포트되고 있다. canvas를 사용하여 평면 도형을 그릴 때는 2d를 지정한다.
이것만으로도 괜찮지만, canvas를 서포트하고 있지 않는 브라우저를 스테이하면, 묘화 코드의 부분을 if문으로 둘러싸 두면 좋다.
그리기 컨텍스트 얻기 var canvas = document.getElementById("id名");
if (canvas.getContext) {
var context = canvas.getContext("2d");
// 図形を描くコードを記述
}
샘플 코드
이상을 근거로 실제로 선과 사각형, 원을 그립니다.
샘플 코드<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>線</h1>
<canvas id="line" width="100" height="100"></canvas>
<h1>四角</h1>
<canvas id="rectangle" width="100" height="100"></canvas>
<h1>円</h1>
<canvas id="circle" width="100" height="100"></canvas>
<script type="text/javascript">
//読み込み時に実行する
onload = function() {
/* 線を引く */
var line_canvas = document.getElementById("line");
var line_ctx = line_canvas.getContext("2d");
line_ctx.beginPath();
// 開始位置に移動する
line_ctx.moveTo(20, 20);
// 線を引く
line_ctx.lineTo(80, 80);
line_ctx.closePath();
line_ctx.stroke();
/* 四角を描く */
var rect_canvas = document.getElementById("rectangle");
var rect_ctx = rect_canvas.getContext("2d");
rect_ctx.beginPath();
// 四角を描く
rect_ctx.strokeRect(20, 20, 60, 60);
/* 色の付いた円を書く */
var cir_canvas = document.getElementById("circle");
var cir_ctx = cir_canvas.getContext("2d");
// 塗りつぶす色を指定する
cir_ctx.fillStyle = 'blue';
cir_ctx.beginPath();
// 円を描く位置を決める
cir_ctx.arc(50, 50, 40, 0, Math.PI * 2, false);
// 実際に円を書く
cir_ctx.fill();
}
</script>
</body>
</html>
참고문헌
캔버스 태그로 도형 그리기
도형을 그릴 수 있다! HTML5의 캔버스 작성 방법 [초보자용]
Reference
이 문제에 관하여(HTML에서 캔버스를 사용하면 도형을 그릴 수 있습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/mzmz__02/items/4fb3f4b9232723725b9d
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
도형을 그리기 위해서는 png나 jpeg 등의 이미지로 바꾸거나 Flash 등의 플러그인 데이터를 임베드하는 것이 일반적이었지만, HTML5에서 2D 그래픽을 그리는
<canvas> . canvas를 사용함으로써 표준 HTML과 JavaScript만으로 그래프나 게임 그래픽 등의 도형을 표시할 수 있게 되었다.쓰기
canvas 태그는 다음과 같이 쓴다.
쓰기<canvas id="id名" width="canvasの横幅" height="canvasの縦幅">
</canvas>
하지만, 도형은 이것만으로는 표시되지 않는다. HTML의 부분과 JavaScript를 id명으로 관련지어, 그리는 도형을 지정한다. JavaScript 부분에서는 그리는 도형을 지정하기 전에 우선 캠퍼스를 사용할 준비가 필요하다.
그리기 컨텍스트 얻기var canvas = document.getElementById("id名");
var context = canvas.getContext("2d");
묘화 문맥의 취득의 1행에서는 getElementById 메소드를 사용해, HTML 문서내에서 id명을 지정한 요소를 의 부분을 참조하고 있다. (이것으로 취득한 오브젝트에 canvas라는 이름을 붙이고 있다.)
이 캔버스에 대해 캔버스에 액세스하기 위한 메소드이다 getContext 메소드(canvas를 조작할 때는 반드시 필요)를 실행하고 있다.
2행째에서는 getContext("2d") 로 문맥명을 지정하고 있다. 현재는 이 메소드에서는 2d 만이 서포트되고 있다. canvas를 사용하여 평면 도형을 그릴 때는 2d를 지정한다.
이것만으로도 괜찮지만, canvas를 서포트하고 있지 않는 브라우저를 스테이하면, 묘화 코드의 부분을 if문으로 둘러싸 두면 좋다.
그리기 컨텍스트 얻기 var canvas = document.getElementById("id名");
if (canvas.getContext) {
var context = canvas.getContext("2d");
// 図形を描くコードを記述
}
샘플 코드
이상을 근거로 실제로 선과 사각형, 원을 그립니다.
샘플 코드<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>線</h1>
<canvas id="line" width="100" height="100"></canvas>
<h1>四角</h1>
<canvas id="rectangle" width="100" height="100"></canvas>
<h1>円</h1>
<canvas id="circle" width="100" height="100"></canvas>
<script type="text/javascript">
//読み込み時に実行する
onload = function() {
/* 線を引く */
var line_canvas = document.getElementById("line");
var line_ctx = line_canvas.getContext("2d");
line_ctx.beginPath();
// 開始位置に移動する
line_ctx.moveTo(20, 20);
// 線を引く
line_ctx.lineTo(80, 80);
line_ctx.closePath();
line_ctx.stroke();
/* 四角を描く */
var rect_canvas = document.getElementById("rectangle");
var rect_ctx = rect_canvas.getContext("2d");
rect_ctx.beginPath();
// 四角を描く
rect_ctx.strokeRect(20, 20, 60, 60);
/* 色の付いた円を書く */
var cir_canvas = document.getElementById("circle");
var cir_ctx = cir_canvas.getContext("2d");
// 塗りつぶす色を指定する
cir_ctx.fillStyle = 'blue';
cir_ctx.beginPath();
// 円を描く位置を決める
cir_ctx.arc(50, 50, 40, 0, Math.PI * 2, false);
// 実際に円を書く
cir_ctx.fill();
}
</script>
</body>
</html>
참고문헌
캔버스 태그로 도형 그리기
도형을 그릴 수 있다! HTML5의 캔버스 작성 방법 [초보자용]
Reference
이 문제에 관하여(HTML에서 캔버스를 사용하면 도형을 그릴 수 있습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/mzmz__02/items/4fb3f4b9232723725b9d
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<canvas id="id名" width="canvasの横幅" height="canvasの縦幅">
</canvas>
var canvas = document.getElementById("id名");
var context = canvas.getContext("2d");
var canvas = document.getElementById("id名");
if (canvas.getContext) {
var context = canvas.getContext("2d");
// 図形を描くコードを記述
}
이상을 근거로 실제로 선과 사각형, 원을 그립니다.
샘플 코드
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>線</h1>
<canvas id="line" width="100" height="100"></canvas>
<h1>四角</h1>
<canvas id="rectangle" width="100" height="100"></canvas>
<h1>円</h1>
<canvas id="circle" width="100" height="100"></canvas>
<script type="text/javascript">
//読み込み時に実行する
onload = function() {
/* 線を引く */
var line_canvas = document.getElementById("line");
var line_ctx = line_canvas.getContext("2d");
line_ctx.beginPath();
// 開始位置に移動する
line_ctx.moveTo(20, 20);
// 線を引く
line_ctx.lineTo(80, 80);
line_ctx.closePath();
line_ctx.stroke();
/* 四角を描く */
var rect_canvas = document.getElementById("rectangle");
var rect_ctx = rect_canvas.getContext("2d");
rect_ctx.beginPath();
// 四角を描く
rect_ctx.strokeRect(20, 20, 60, 60);
/* 色の付いた円を書く */
var cir_canvas = document.getElementById("circle");
var cir_ctx = cir_canvas.getContext("2d");
// 塗りつぶす色を指定する
cir_ctx.fillStyle = 'blue';
cir_ctx.beginPath();
// 円を描く位置を決める
cir_ctx.arc(50, 50, 40, 0, Math.PI * 2, false);
// 実際に円を書く
cir_ctx.fill();
}
</script>
</body>
</html>
참고문헌
캔버스 태그로 도형 그리기
도형을 그릴 수 있다! HTML5의 캔버스 작성 방법 [초보자용]
Reference
이 문제에 관하여(HTML에서 캔버스를 사용하면 도형을 그릴 수 있습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/mzmz__02/items/4fb3f4b9232723725b9d
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(HTML에서 캔버스를 사용하면 도형을 그릴 수 있습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/mzmz__02/items/4fb3f4b9232723725b9d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
