我正在 HTML5 Canvas 上构建一个旋转超立方体，但在此目标之前我遇到了 Canvas 的基本困难。我有一个白色/无色的 Canvas ，我试图在将 fillStyle 和 strokeStyle 设置为“#000000”后绘制线条，但我尚未成功地使 Canvas 上的任何像素显示为白色以外的像素。
Canvas 位于 http://blajeny.com/tesseract.html ，而 JavaScript 部分是数学，部分是老式 JavaScript，位于 http://blajeny.com/js/tesseract.js 。日志说它正在 Canvas 上绘制线条，其中一些应该与 500x500 Canvas 相交，其中一些应该完全位于 Canvas 内部，但我只能看到纯白色。
它的数学方面需要在从高维表面到低维表面的投影方面进行工作。然而，我现在试图解决的困难是一个基本的 HTML5 Canvas 问题，因为我正在设置颜色，移动到坐标并绘制一条线来坐标，其中一些重叠，其中一些在 500x500 Canvas 内，并且没有看到任何变化黑色的。 (JavaScript 控制台记录我尝试绘制的线条。)
如何让我想要绘制的线条显示出来？
最佳答案
您需要让 Canvas 知道何时使用 context.beginPath() 和 context.Stroke()/context.fill() 开始和停止绘图。这是代码和 fiddle :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>
关于javascript - 为什么 Canvas 线条不可见？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14880936/