1

我正在 HTML5 Canvas 上构建一个旋转超立方体，但在此之前，我遇到了 Canvas 的基本困难。我有一个白色/未着色的画布，我试图在将 fillStyle 和 strokeStyle 设置为“#000000”后画线，但我还没有成功地让画布上的任何像素都显示为白色以外。

画布位于http://blajeny.com/tesseract.html，部分数学和部分老式 JavaScript 的 JavaScript 位于http://blajeny.com/js/tesseract.js。日志说它正在画布上画线，其中一些应该与 500x500 画布相交，其中一些应该完全位于画布内，但我能看到的只是纯白色。

它的数学方面需要在从高维到低维表面的投影方面工作。然而，我现在要解决的困难是一个基本的 HTML5 画布问题，因为我正在设置颜色，移动到并绘制一条线来协调其中一些重叠，其中一些在 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 回答