뇌 채우기 공간

[html] canvas 태그, 이미지나 애니메이션을 그리기[html] canvas 태그, 이미지나 애니메이션을 그리기 본문

WEB/html,CSS

[html] canvas 태그, 이미지나 애니메이션을 그리기[html] canvas 태그, 이미지나 애니메이션을 그리기

자바칩 프라푸치노 2021. 4. 7. 10:10

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 그래픽이나 애니메이션을 렌더링 -->
    <canvas id="canvas" width="200" height="150"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const 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>
</body>
</html>
 cs

 

728x90
저작자표시 비영리 변경금지 (새창열림)

'WEB > html,CSS' 카테고리의 다른 글

[html][js] html<script>/ js파일연결하기/src  (0) 2021.04.08
[html][js] html<script>/ js파일연결하기/구문 분석 후 실행 defer  (0) 2021.04.08
[html] 내장콘텐츠. 페이지에 동영상이나 페이지를 내장으로 삽입하는 태그 iframe태그  (0) 2021.04.07
[html] video 썸네일 지정하기  (0) 2021.04.07
[html] 이미지 소스 셋 img srcset / 브라우저 크기에 따라 자동으로 이미지 크기 바꾸기/ sizes속성  (0) 2021.04.07
'WEB/html,CSS' Related Articles more