Question

我正在构建HTML5 Canvas上的旋转超立方体，但在此目标之前，我正在使用Canvas达到基本难度。我有一个白色/无色的画布，我试图在将fillStyle和strokeStyle设置为'＃000000'之后绘制线条，而我还没有成功地使画布上的任何像素显示为白色以外的其他像素。

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

它的数学方面需要在从较高维度到较低维度表面的投影方面起作用。然而，我现在要解决的困难是一个基本的HTML5画布问题，我正在设置一个颜色，移动到并绘制一条线到坐标，其中一些重叠，其中一些在500x500画布内，并没有看到任何转向黑色。（JavaScript控制台记录我想要绘制的行。）

如何才能显示我想要显示的线条？

Answer 1

您需要在使用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>

为什么帆布线不可见？

1 个答案: