Question

我正在制作一个网页游戏只是为了一些练习，但我的绘图不会显示在浏览器的canvas元素中。我不知道为什么它不会显示。顺便说一句，我使用变量作为水平位置的值，以便我以后可以轻松地更改它们。

的JavaScript

var canvas = getElementById('myCanvas');
var blt = canvas.getContext('2d');
var bS = 20;
var x = 220;
var y = 340;
var x1 = 227;
var x2 = 229;
var x3 = 240;
var x4 = 251;
var x5 = 253;
var x6 = 260;

function drawShip() {
  blt.beginPath();
  blt.moveTo(x,360);
  blt.lineTo(x,340);
  blt.lineTo(x1,337);
  blt.lineTo(x2,337);
  blt.lineTo(x2,340);
  blt.lineTo(x3,330);
  blt.lineTo(x4,340);
  blt.lineTo(x4,337);
  blt.lineTo(x5,337);
  blt.lineTo(x6,340);
  blt.lineTo(x6,360);
  blt.lineTo(x,360);
  blt.closePath();
};

drawShip();

Answer 1

您需要使用stroke（）方法将路径绘制为一条线。

在这里，您可以找到每个画布方法和一些文档和示例： http://www.w3schools.com/tags/ref_canvas.asp

Answer 2

你忘记了中风。在blt.closePath()

之后添加

blt.stroke();

Answer 3

在您的代码中更改行

var canvas = getElementById('myCanvas');

通过

var canvas = document.getElementById('myCanvas');

并在blt.stroke();

之后添加blt.closePath();

画布绘图不会显示

3 个答案: