HTML キャンバスをシンプルに: 初心者向けガイド。

目次

1. はじめに
2. はじめに
3. 描画の基本
4. テキストの追加
5. 結論と次のステップ

? はじめに

HTML タグを持つ HTML 要素です。 Javascript を介して 2 次元または 3 次元でグラフィックを描画するために使用されます。 は、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 を引く必要があります。

---

? でテキストを入力します

テキストを作成するには、次のメソッドが使用されます:

• フォント: フォント サイズとフォント ファミリーを指定します。
• fillStyle: テキストに色を追加します。
• fillText: 塗りつぶされたテキストを描画します。
• ストロークテキスト: アウトラインテキストを描画します
• createLinearGradient または createRadialGradient: テキストにグラデーションを追加します
• textAlign: テキストを水平方向に設定します

---

結論

HTML の使用グラフィックを動的に描画するのに役立ちます。これで、後で複雑なグラフィックを作成するための基礎となる、キャンバスの使用法と重要性を含めて、キャンバスで描画する方法を学習しました。

私とつながりましょう

Web 開発に関するその他の記事については、こちらをご覧ください。 Linkedin と X でフォローしてください
Linkedin X

以上がHTML キャンバスをシンプルに: 初心者向けガイド。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。