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

목차

1. 소개
2. 시작하기
3. 그림 기초
4. 텍스트 추가
5. 결론 및 다음 단계

? 소개

HTML 태그가 있는 HTML 요소입니다. Javascript를 통해 2차원 또는 3차원 그래픽을 그리는 데 사용됩니다. 시각적으로 매력적이고 대화형 요소를 생성하기 위해 자바스크립트로 텍스트, 이미지, 모양, 애니메이션을 생성할 수 있는 래퍼입니다.

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

HTML 사용 사례

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

---

?시작하기

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

   
     
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>HTML Canvas Example</title>
     
     
       <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">
   
     
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>HTML Canvas Example</title>
     
     
       <canvas>



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

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173467309470040.jpg?x-oss-process=image/resize,p_40" 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>

<ul>
<li>
fillRect(x, y, width, height): This method is to draw a filled rectangle at a position(x, y) with a specified width and height.</li>
<li>
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.</li>
</ul>

<p>Other methods are:</p>

<ul>
<li>
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).</li>
<li>
clearRect(x, y, width, height): to clear the rectangle by making it transparent.</li>
</ul>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173467309545713.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="HTML Canvas Made Simple: A Guide for Beginners."></p>

<hr>
<h2>
  
  
  ? <strong>Drawing basics</strong>
</h2>

<p>Different shapes and lines can be drawn using some specific methods depending on the object.</p>
<h4>
  
  
  1. Path:
</h4>

<p>Examples are line, wavy line, zigzag e.t.c</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173467309649925.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="HTML Canvas Made Simple: A Guide for Beginners."></p>

<p>For creating a line, the following method needs to be set up:</p>

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

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173467309776138.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="HTML Canvas Made Simple: A Guide for Beginners."></p>
<h4>
  
  
  2.   Rectangle and Square
</h4>

<ul>
<li>Rectangle</li>
</ul>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173467309977240.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="HTML Canvas Made Simple: A Guide for Beginners."></p>

<ul>
<li>Square </li>
</ul>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173467310125861.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="HTML Canvas Made Simple: A Guide for Beginners."></p>

<p>These following methods are used in creating a rectangle or square:</p>

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

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173467310240234.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="HTML Canvas Made Simple: A Guide for Beginners."><br>
 These following methods are used in creating a circle:</p>

<ul>
<li>
beginPath(): this method to begin a path.</li>
<li>
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.</li>
</ul>
<h4>
  
  
  4. Polygon
</h4>

<p>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).</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173467310482546.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="HTML Canvas Made Simple: A Guide for Beginners."></p>

<p>These following methods are used in creating a circle:</p>

<ul>
<li>
beginPath(): this method is to create a new shape.</li>
<li>
closePath(): this method is to end the shape.</li>
<li>
cx: its value for the center of x co-ordinates.</li>
<li>
cy: its value specifies the center for y co-ordinates.</li>
<li>
radius: radius of the shape.</li>
</ul>

<p>To get the angle, you have to calculate with this formula by dividing the circle into two;<br>
</p>

<pre class="brush:php;toolbar:false">angle = 2π/ n

여기서 π는 3.14입니다. n은 변의 수입니다. 또한 모양의 위치를 ​​위에서 아래로 가져오려면 π/2를 빼야 합니다.

---

? 가 포함된 텍스트

텍스트를 생성하려면 다음 방법을 사용합니다.

• 글꼴: 글꼴 크기와 글꼴 모음을 지정합니다.
• fillStyle: 텍스트에 색상을 추가합니다.
• fillText: 채워진 텍스트를 그립니다.
• 스트로크텍스트: 윤곽선 텍스트를 그립니다
• createLinearGradient 또는 createRadialGradient: 텍스트에 그라디언트 추가
• textAlign: 텍스트를 가로로 설정합니다

---

결론

HTML 사용 동적으로 그래픽을 그리는 데 도움이 될 수 있습니다. 이를 통해 나중에 복잡한 그래픽을 만드는 기초가 되는 캔버스의 사용법과 중요성을 포함하여 그리는 방법을 배웠습니다.

저와 소통하세요

웹 개발에 대한 더 많은 기사를 보려면 Linkedin과 X에서 나를 팔로우하세요
링크드인X

위 내용은 HTML 캔버스를 간단하게: 초보자를 위한 가이드.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!