참조링크 Canva API
https://developer.mozilla.org/ko/docs/Web/API/Canvas_API
Canvas API - Web API | MDN
Canvas API는 JavaScript와 HTML <canvas> 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용
developer.mozilla.org
Canvas의 활용..
이미지를 그릴 수 있다.
그리는 방법은?
<canvas></canvas> 태그 사용.
3D 모양은 WebGL, OpenGL 을 사용한다.
<기본형태>
<canvas id="tutorial" width="300" height="300"></canvas>
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
<getContext 지원여부 확인>
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
<그림그리기 기본형태>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 50, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 50, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
'프로그래밍 > HTML' 카테고리의 다른 글
| [HTML] canvas 제자리 회전하기 (중심축 변경하기) (0) | 2022.07.24 |
|---|---|
| [HTML] Canvas setTransform, transform (0) | 2022.07.23 |
