집 > 기사 > 웹 프론트엔드 > Canvas 태그를 통해 그래픽을 그리는 방법

Canvas 태그를 통해 그래픽을 그리는 방법

藏色散人원래의: 2018-11-30 10:37:003729검색

캔버스 태그를 통해 그래픽을 그리는 방법: 먼저 HTML 샘플 파일을 만든 다음 본문에 ""를 입력하고 마지막으로 CSS 속성을 통해 그래픽 스타일을 설정합니다.

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

캔버스 태그는 HTML5의 새로운 요소입니다. 이 태그는 그래픽 그리기에 사용됩니다. HTML5는 World Wide Web의 핵심 언어이자 Standard Universal Markup Language의 응용 프로그램인 HTML(Hypertext Markup Language)의 다섯 번째 주요 개정판입니다.

그래서 HTML을 처음 배우는 분들은 이 태그 요소에 대해 명확하지 않을 수도 있습니다.

아래에서는 간단한 예시를 통해 Canvas 태그 사용에 대한 자세한 설명을 소개하겠습니다.

canvas는 다음과 같이 간단한 캔버스 그래픽(직사각형) 샘플 코드를 그립니다.

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title>Canvas简单使用示例</title>
    <style type="text/css">
        #FirstCanvas{
            width: 450px;
            height: 300px;
            border: 3px solid #3262ff;
            background-color: #acffcb;
        }
    </style>
</head>
<body>
<canvas id="FirstCanvas"></canvas>
</body>
</html>

Canvas 태그를 통해 그래픽을 그리는 방법

관련 기사