1

HTML5 Canvas で回転するハイパーキューブを構築していますが、その目標の前に、Canvas の基本的な問題に到達しています。白/無色のキャンバスがあり、fillStyle と strokeStyle を '#000000' に設定した後で線を描画しようとしていますが、キャンバス上に白以外のピクセルを表示することにまだ成功していません。

キャンバスはhttp://blajeny.com/tesseract.htmlにあり、一部が数学で一部が旧式の JavaScript である JavaScript はhttp://blajeny.com/js/tesseract.jsにあります。ログには、キャンバス上に線を描いていると書かれており、そのうちのいくつかは 500x500 キャンバスと交差し、一部は完全にキャンバスの内側にあるはずですが、私が見ることができるのは純粋な白だけです。

数学的な側面では、高次元から低次元の表面への射影に関して作業が必要です。ただし、現在対処しようとしている問題は、基本的な HTML5 キャンバスの問題です。色を設定し、座標に移動して線を描画し、その一部が 500x500 キャンバス内にあり、一部が 500x500 キャンバス内にあり、何も表示されません。黒。(JavaScript コンソールは、描画しようとしている線をログに記録します。)

描画しようとしている線を表示するにはどうすればよいですか?

4

1 に答える 1

3

context.beginPath() と context.stroke()/context.fill() を使用して、描画の開始と停止をキャンバスに知らせる必要があります。ここにコードとフィドルがあります：http://jsfiddle.net/m1erickson/Jw8XU/

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      canvas{border:1px solid red;}
    </style>
  </head>
  <body>
    <canvas id="canvas" width="300" height="300"></canvas>
    <script>
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');

      ctx.beginPath();
      ctx.moveTo(50, 75);
      ctx.lineTo(150, 150);
      ctx.stroke();
    </script>
  </body>
</html>
于 2013-02-14T19:19:36.160 に答える