<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>차트</title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css"
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<!-- 내가 만든 CSS 파일-->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
</style>
<!-- jquery cdn -->
<!-- javascript 작성 공간 -->
<script>
$(function () {
//canvas 제어 방식
// - canvas는 Javascript API로 제어한다
// - canvas의 그림 그리는 도구를 context 또는 graphics라고 부름
var canvas = document.querySelector(".sketch");
var context = canvas.getContext("2d")
context.fillStyle = "rgb(200,0,0)";
context.fillRect(10, 10, 50, 50);
context.fillStyle = "rgb(0,200,0)";
context.fillRect(30, 30, 50, 50);
});
</script>
</head>
<body>
<div class="container w-500">
<div class="row">
<h1>캔버스 태그</h1>
</div>
<div class="row">
<canvas class="sketch" width="100%" height="200"></canvas>
</div>
</div>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 이미지 슬라이더(Swiper) (1) | 2023.11.08 |
|---|---|
| 차트2 (ajax) (0) | 2023.11.07 |
| ajax 템플릿 (0) | 2023.11.03 |
| 비동기 통신(ajax) 닉네임 체크 (0) | 2023.11.02 |
| 비동기통신(ajax) 아이디 체크 (0) | 2023.11.01 |