Question

    <!DOCTYPE html>
<html>
   <head>
     <title>oppg.5</title>
   </head>
  <body>

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


    <script>

    var canvas = document.getElementById('canvas');
    var c = canvas.getContext('2d');
    c.canvas.height = 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 - 50);
    c.lineTo(cX - 100, cY - 50);
    c.lineTo(cX - 100, cY - 50);
    c.fillStyle = blue;
    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.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>

https://jsfiddle.net/q5kwv5s1/

我希望有一所房子，但墙却出现了。我没有得到任何控制台错误。我按照这个例子：http://codepen.io/kratka/pen/YywpXV。我期待一座蓝色的房子，而不是黑墙。我错过了什么/做错了什么？

Answer 1

你有很多小错误

第一

c.canvas.height = window.innerWidth;
c.canvas.height = window.innerHeight;

你写c.canvas.height两次

第二

c.fillstyle = blue;

应该是cammelcased fillStyle

第三

c.closePath;

c.closePath（）是一个函数

第四：

c.fillstyle = white;

c.fillStyle再次

第五：

c.lineTo(cX, cY - 50);
c.lineTo(cX - 100, cY - 50);

50而不是150和 - 而不是+

更多用途：https://www.diffnow.com/

帆布“房子”没有按预期出现

1 个答案: