Javascript 帆布“；“房子”；不象预期的那样出现 oppg.5 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=画布高度/2； var blue=“#447FFF”； var white=“#FFF”； //众议院 c、 beginPath（）； c、 rect（cX-100，cY-50200200）； c、填充样式=蓝色； c、填充（）； c、封闭路径； //窗口 c、 beginPath（）； c、 rect（cX-70，cY-20，40，40）； c、填充样式=白色； c、填充（）； c、 closePath（）； //屋顶 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、填充样式=蓝色； c、填充（）； c、 closePath（）； //屋顶装饰对于（var j=0；j_Javascript_Html

Javascript 帆布“；“房子”；不象预期的那样出现 oppg.5 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=画布高度/2； var blue=“#447FFF”； var white=“#FFF”； //众议院 c、 beginPath（）； c、 rect（cX-100，cY-50200200）； c、填充样式=蓝色； c、填充（）； c、封闭路径； //窗口 c、 beginPath（）； c、 rect（cX-70，cY-20，40，40）； c、填充样式=白色； c、填充（）； c、 closePath（）； //屋顶 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、填充样式=蓝色； c、填充（）； c、 closePath（）； //屋顶装饰对于（var j=0；j

javascript html

Javascript 帆布“；“房子”；不象预期的那样出现 oppg.5 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=画布高度/2； var blue=“#447FFF”； var white=“#FFF”； //众议院 c、 beginPath（）； c、 rect（cX-100，cY-50200200）； c、填充样式=蓝色； c、填充（）； c、封闭路径； //窗口 c、 beginPath（）； c、 rect（cX-70，cY-20，40，40）； c、填充样式=白色； c、填充（）； c、 closePath（）； //屋顶 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、填充样式=蓝色； c、填充（）； c、 closePath（）； //屋顶装饰对于（var j=0；j,javascript,html,Javascript,Html,您有很多小错误第一: <!DOCTYPE html> <html> <head> <title>oppg.5</title> </head> <body> <canvas id="canvas"></canvas> <script> var canvas = document.getElementById('c

您有很多小错误

第一:

    <!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>

写c.canvas.height两次

第二：

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

应该是Cammelsecase填充样式

第三：

c.fillstyle = blue;

c、 closePath（）是一个函数

第四：

c、再次填充样式

第五：

50而不是150和-而不是+

更多使用：

这真的很有用！

c.closePath;

c.fillstyle = white;

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