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

JavaScriptでキャンバスに描画する方法は？

HTMLキャンバスへの描画は、JavaScriptを使用して行います。キャンバスに描画する前に、HTML DOMメソッドgetElementById（）およびgetContext（）を使用してください。

そのためには、いくつかの手順に従います-

  • キャンバス要素を見つけるには、getElementById（）メソッドを使用する必要があります。
  • キャンバスの描画オブジェクトであるgetContext（）を使用します。描画のメソッドとプロパティを提供します。
  • その後、キャンバスに描画します。

JavaScriptでキャンバスに描画する方法は？

例

次のコードを実行して、JavaScriptでキャンバスを描画してみてください-

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Canvas</title>
   </head>
   <body>
      <canvas id="newCanvas" width="400" height="250" style="border:2px solid #000000;"></canvas>
      <script>
         var canvas = document.getElementById("newCanvas");
         var ctxt = canvas.getContext("2d");
         ctxt.fillStyle = "#56A7E2";
         ctxt.fillRect(0,0,250,120);
      </script>
   </body>
</html>

  1. JavaScriptで画面解像度を検出する方法は？

    画面の解像度を検出するには、window.screenの概念を使用します。 幅は以下を使用してください- window.screen.availWidth 高さの場合- window.screen.availHeight 以下は、画面解像度を検出するためのコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt

  2. JavaScriptでinnerHTMLを設定する

    innerHTMLを設定するための正しい構文は次のとおりです- document.getElementById(“yourIdName”).innerHTML=”yourValue”; 次に、innerHTMLを設定する方法を見てみましょう- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=&