为什么画布线不可见？答案

【问题标题】：Why aren't canvas lines visible?为什么画布线不可见？
【发布时间】：2013-02-15 03:19:36
【问题描述】：

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

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

它的数学方面需要从高维到低维表面的投影。然而，我现在要解决的困难是一个基本的 HTML5 画布问题，因为我正在设置颜色，移动到并绘制一条线来协调其中一些重叠，其中一些在 500x500 画布内，并且看不到任何东西黑色的。（JavaScript 控制台会记录我尝试绘制的线条。）

如何让我尝试绘制的线条显示出来？

【问题讨论】：

标签： javascript html math canvas

【解决方案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>

【讨论】：