帆布屋。将代码复制到编辑器并在浏览器中运行时，为什么代码不起作用？

Question

http://codepen.io/kratka/pen/YywpXV

What do I have to do, to make it work? 我必须做什么才能使其正常工作？ I copy the code, and I am pretty sure I am missing something vital. 我复制了代码，而且我很确定自己缺少一些重要的东西。 Or is it something I have to remove from the code? 还是我必须从代码中删除它？ Maybe I should just learn more about canvas, and build it from the ground up. 也许我应该只是学习更多有关画布的知识，并从头开始构建它。 But it seems more convenient to use the example, at least as a blueprint. 但是使用该示例似乎更方便，至少作为蓝图。

<!DOCTYPE html>
<html>
   <head>
     <title>Test</title>
   </head>
  <body>

<canvas id="canvas"></canvas>  

<script="text/javascript">

var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
c.canvas.width  = window.innerWidth;
c.canvas.height = window.innerHeight;
var cX = canvas.width / 2;
var cY = canvas.height / 2;
var blue = "#447FFF";
var white = "#FFF";

// house body
c.beginPath();
c.rect(cX - 100, cY - 50, 200, 200);
c.fillStyle = blue;
c.fill();
c.closePath();

// window
c.beginPath();
c.rect(cX - 70, cY - 20, 40, 40);
c.fillStyle = white;
c.fill();
c.closePath();

// roof
c.beginPath();
c.moveTo(cX - 100, cY - 50);
c.lineTo(cX, cY - 150);
c.lineTo(cX + 100, cY - 50);
c.lineTo(cX - 100, cY -50);
c.fillStyle = blue;
c.fill();
c.closePath();

// door
c.beginPath();
c.rect(cX + 20, cY + 71, 50, 80);
c.fillStyle = white;
c.fill();
c.closePath();

// roof decor
for (var j = 0; j < 5; j++) {
  for (var i = 0; i < 10; i++) {
   c.beginPath();
   c.moveTo((cX - 70) + (i * 20), (cY - 50) - (j * 20));
   c.lineTo((cX - 80) + (i * 20), (cY - 60) - (j * 20));
   c.moveTo((cX - 110) + (i * 20), (cY - 50) - (j * 20));
   c.lineTo((cX - 90) + (i * 20), (cY - 70) - (j * 20));
   c.strokeStyle = white;
   c.stroke();
   c.closePath();
  }
}

// body decor
for (var j = 0; j < 7; j++) {
  for (var i = 0; i < 8; i++) {
   c.beginPath();
   c.moveTo((cX - 100) + (i * 30), (cY + 135) - (j * 30));
   c.lineTo((cX - 130) + (i * 30), (cY + 135) - (j * 30));
   c.lineTo((cX - 130) + (i * 30), (cY + 150) - (j * 30));
   if ( j != 6 ) {
   c.moveTo((cX - 115) + (i * 30), (cY + 135) - (j * 30));
   c.lineTo((cX - 115) + (i * 30), (cY + 120) - (j * 30));
   c.lineTo((cX - 85) + (i * 30), (cY + 120) - (j * 30));
   }
   //c.rect((cX - 100) + (i * 30), (cY + 135) - (j * 30), 30, 15);
   //if ( j != 6 ) {
     //c.rect((cX - 85) + (i * 30), (cY + 120) - (j * 30), 30, 15);
   //}
   c.strokeStyle = white;
   c.stroke();
   c.closePath();
  }
}

// chimney
c.beginPath();
c.rect(cX + 60, cY - 120, 20, 50);
c.rect(cX + 50, cY - 130, 40, 10);
c.fillStyle = blue;
c.fill();
c.closePath();

// window lines
c.beginPath();
c.moveTo(cX - 70, cY);
c.lineTo(cX - 30, cY);
c.moveTo(cX - 50, cY - 20);
c.lineTo(cX - 50, cY + 20);
c.strokeStyle = blue;
c.lineWidth = 2;
c.stroke();
c.closePath();


</script>

  </body>
</html>

Answer 1

Good job, but your issue is with how you defined your script: 做得好，但是问题在于您如何定义脚本：

<script="text/javascript">...

should be 应该

<script type="text/javascript">...

and most people just use 大多数人只是用

<script>...

帆布屋。将代码复制到编辑器并在浏览器中运行时，为什么代码不起作用？

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-03-10 13:15:16

帆布屋。 将代码复制到编辑器并在浏览器中运行时，为什么代码不起作用？

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-03-10 13:15:16

帆布屋。将代码复制到编辑器并在浏览器中运行时，为什么代码不起作用？

解决方案1
0 已采纳 2017-03-10 13:15:16