HTML 캔버스를 간단하게: 초보자를 위한 가이드.-JS 튜토리얼-php.cn

HTML 캔버스를 간단하게: 초보자를 위한 가이드.

Mary-Kate Olsen

풀어 주다： 2024-12-20 13:38:10

원래의

755명이 탐색했습니다.

? 소개

HTML <캔버스>

HTML Canvas Made Simple: A Guide for Beginners.

<캔버스> 는 개발자에게 놀라운 그래픽을 만들 수 있는 유연성을 제공하는 모든 브라우저와 장치에서 사용할 수 있습니다.

HTML <캔버스> 사용 사례

도형 및 선 그리기: 개체에 색상 및 그라데이션 추가를 포함하여 모양, 패턴 및 선을 그릴 수 있습니다.
애니메이션 및 상호작용:
이미지 조작: 이미지 크기를 조정하거나 자르는 데 사용할 수 있습니다.
게임 그래픽: 게임 개발자가 아름다운 게임 사용자 인터페이스를 만드는 데에도 사용됩니다
데이터 시각화 : 그래프, 차트 작성을 위한 것입니다.

?시작하기

HTML <캔버스> HTML 파일에서 사용되며 스크립트 태그에서 내부적으로 또는 javascript 파일에서 외부적으로 조작될 수 있습니다. 이것이 없으면 캔버스 개체가 표시되지 않습니다.
먼저 index.html 파일을 생성하고 생성할 개체에 대한

<!doctype html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>HTML Canvas Example</title>
     </head>
     <body>
       <canvas>



<p>Then we add a script tag so we can define the behavior of the object.<br>
</p>

<pre class="brush:php;toolbar:false"><!doctype html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>HTML Canvas Example</title>
     </head>
     <body>
       <canvas>



<p>Wowu !!! We get the output.</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173467309470040.jpg" class="lazy" alt="HTML Canvas Made Simple: A Guide for Beginners."></p>

<p>Looking at the structure of the code. We define canvas wrapper having an id attribute, this is can only be done by id and not class because of uniqueness which is used to reference the canvas with the id name.<br>
To access this we need to retrieve the node created in the Document Object Model(DOM) by using the getElementById("myCanvas") and have access to it using the getContext("2d") method.</p>

<p>This method make us to have access to different drawing methods like</p>

로그인 후 복사

fillRect(x, y, width, height): This method is to draw a filled rectangle at a position(x, y) with a specified width and height.
fillStyle = colorName: It is a property to set the color for the object. It could be a colorname, RGB or hex code for the object.

Other methods are:

strokeRect(x, y, width, height): This method to to make a outline stroke on the rectangle, this may be used independently or combined with fillStyle and fillRect(x, y, width, height).
clearRect(x, y, width, height): to clear the rectangle by making it transparent.

HTML Canvas Made Simple: A Guide for Beginners.

? Drawing basics

Different shapes and lines can be drawn using some specific methods depending on the object.

1. Path:

Examples are line, wavy line, zigzag e.t.c

HTML Canvas Made Simple: A Guide for Beginners.

For creating a line, the following method needs to be set up:

beginPath(): This method is to start a new path for a drawing.
moveTo(x, y): This is to move the drawing to the specified points.
lineTo(x, y): This is to draw from the current position to the specified points.
stroke(): This is to draw the line.

HTML Canvas Made Simple: A Guide for Beginners.

2. Rectangle and Square

Rectangle

HTML Canvas Made Simple: A Guide for Beginners.

Square

HTML Canvas Made Simple: A Guide for Beginners.

These following methods are used in creating a rectangle or square:

fillRect: this method is for create rectangle and square only.
clearRect(x, y, width, height): this method is to clear rectangle hence making it transparent.
strokeRect(x, y, width, height): is used to create an outline rectangle or square.
fillStyle: this is used to fill the container of the rectangle or square.
strokeStyle: this method is for add stroke color to an outline rectangle.
roundRect(x, y, width, height, radii): this method is for creating round border rectangle.

3. Circle

HTML Canvas Made Simple: A Guide for Beginners.
These following methods are used in creating a circle:

beginPath(): this method to begin a path.
arc(x, y, radius, startAngle, endAngle, anticlockwise): this is for to create circle where x and y is for center coordinate of the center, radius is the radius of the circle, startAngle and endAngle which is an angle for the circle.

4. Polygon

To create a polygon, you need to determine the sides of the shape, it could be a triangle(3 sides), pentagon (5 sides), hexagon(6 sides) or decagon (10 sides).

HTML Canvas Made Simple: A Guide for Beginners.