HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML5キャンバスに長方形を描く方法は？

HTML5 タグは、スクリプトを使用してグラフィックやアニメーションなどを描画するために使用されます。 HTML5で導入された新しいタグです。 canvas要素にはgetContextと呼ばれるDOMメソッドがあり、レンダリングコンテキストとその描画関数を取得します。この関数は、コンテキスト2dのタイプという1つのパラメーターを取ります。

HTML5キャンバスで長方形を描画するには、fillRect（x、y、width、height）メソッドを使用します：

HTML5キャンバスに長方形を描く方法は？

次のコードを実行して、HTML5Canvasで長方形を描画する方法を学ぶことができます

例 
<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Canvas Tag</title>
   </head>
   
   <body>
      <canvas id="newCanvas" width="200" height="100" style="border:1px
         solid #000000;"></canvas>
      <script>
         var c = document.getElementById('newCanvas');
         var ctx = c.getContext('2d');
         ctx.fillStyle = '#7cce2b';
         ctx.fillRect(0,0,300,100);
      </script>
   </body>
</html>

出力

HTML5キャンバスに長方形を描く方法は？


  1. キャンバスHTML5を使用して星を描く方法は？

    HTMLキャンバスへの描画は、JavaScriptを使用して行います。キャンバスに描画する前に、HTML DOMメソッドgetElementById（）およびgetContext（）を使用します。 HTMLで星を描くには、canvas要素を使用します。 キャンバスでは、lineTo（）メソッドを使用して星を描画します。 lineTo（）メソッドには、描画に役立つように線を配置するxおよびyパラメータ値が含まれています。 HTMLドキュメントにキャンバスを描画するには： 例 次のコードを実行して、HTML5キャンバスを使用して星を描くことができます <!DOCTYPE HTML&

  2. HTMLキャンバスに角の丸い長方形を描く方法は？

    HTMLで長方形を描画するには、canvas要素を使用します。キャンバスでは、rect（）メソッドを使用して長方形を描画します。ただし、角の丸い長方形を作成する場合、rect（）メソッドを使用しても機能しません。 lineTo（）メソッドとquadraticCurveTo（）メソッドを使用して、角の丸い長方形を作成します。 これは、HTML5でキャンバスを作成する方法です- キャンバスに角の丸い長方形を作成する方法を学ぶことができます 例 <!DOCTYPE HTML> <html>    <head>