HTML Canvas 变得简单：初学者指南。

目录

1. 简介
2. 开始使用
3. 绘画基础知识
4. 添加文本
5. 结论和后续步骤

？ 简介

HTML 是一个带有标签 的 HTML 元素。用于通过 Javascript 绘制二维或三维图形。 是一个包装器，可以通过 javascript 操作来创建文本、图像、形状、动画，以创建具有视觉吸引力的交互式元素。

的使用适用于所有浏览器和设备，这使开发人员可以灵活地创建令人惊叹的图形。

HTML 的用例

• 绘制形状和线条：它可以绘制形状、图案和线条，包括为对象添加颜色和渐变。
• 动画和交互：创建的对象可以是动画，也可以是用户交互
• 图像操作：这可用于调整图像大小或裁剪图像。
• 游戏图形：游戏开发者也用它来创建漂亮的游戏用户界面
• 数据可视化：用于创建图形和图表。

---

?开始

HTML ;在 HTML 文件中使用，可以在 script 标记中进行内部操作，也可以在 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 才能获得形状从上到下的位置。

---

？ 带有 的文本

要创建文本，使用以下方法：

• font：指定字体大小和字体系列。
• fillStyle：这是给文本添加颜色。
• fillText：绘制填充文本。
• 描边文本：绘制轮廓文本
• createLinearGradient 或 createRadialGradient：为文本添加渐变
• textAlign: 设置文本水平

---

结论

使用 HTML 可以帮助动态绘制图形。至此，您已经学会了如何使用canvas进行绘制，包括它的用途和重要性，这是稍后创建复杂图形的基础。

与我联系

有关 Web 开发的更多文章。在 Linkedin 和 X 上关注我
Linkedin X

以上是HTML Canvas 变得简单：初学者指南。的详细内容。更多信息请关注PHP中文网其他相关文章！