一、canvasを設定してみよう！

2024年2月26日 23:18

■WebGLのcanvas (描画領域) を設定してみましょう。
■サンプルはコチラ↓

.oOo..oOo..oOo.
■解説は、こちらのExcelファイルをご覧下さい↓

■htmlのコードです↓

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>canvasを設定してみましょう！</title>
  </head>
 
  <body onload="main()">


    <canvas id="webgl" width="400" height="400">

    </canvas>

    <script src="webgl-utils.js"></script>

    <script src="webgl-debug.js"></script>
    <script src="sano-func.js"></script>
    <script src="24n26-canvas.js"></script>
  </body>
</html>

■JavaScriptのコードです↓

function main() {
  // canvas要素を取得する
  var canvas_js = document.getElementById('webgl');

  // WebGL描画用のコンテキストを取得する
  var gl = getWebGLContext(canvas_js);
  if (!gl) {
    console.log('WebGLコンテキストの取得に失敗');
    return;
  }

  // Canvasをクリアする色(値)を設定する
  gl.clearColor(0.8, 0.9, 0.1, 1.0);

  // Canvasをクリアする
  gl.clear(gl.COLOR_BUFFER_BIT);
}

■参考文献：WebGL+HTML5 3DCGプログラミング入門

頂戴したサポートは、レンタルサーバーの費用に充てさせて頂きます🙇 心より感謝いたします❤️