Question

您好我正在尝试练习HTML 5画布。我刚开发代码在画布上制作一个三角形。我使用javascript获取canvas元素并尝试在其中绘制一个三角形。我不知道我的javascript文件没有被链接或抓住画布。

Html file code:
   <!doctype html>
   <html lang="en">
   <head>
   <meta charset= "UTF-8">
   <style>

   #canvas {
       width: 400px; 
       height: 200px; 
       border: 1px solid red; 
 }

 </style>
 <script src="canvas.js"></script>
 </head>

<body>
<canvas id="tcanvas">
</canvas>
</body>
</html>

在画布上绘制的Javascript代码：

  window.onload=init;
  function draw() {
    var canvas = document.getElementById('tcanvas');
    var context=canvas.getContext("2d");

      canvas.fillstyle="#0000FF";
      context.lineWidth=3;
      context.beginPath();
      context.moveTo(50,100);
      context.lineTo(150,100);
      context.lineTo(100,50);
      context.lineTo(50,100);
      context.fill();
      context.closePath();


    }

 draw();

Answer 1

init为undefined，这意味着永远不会调用您的draw函数。

查看下面的工作示例，该示例在draw上调用window.onload。

＆＃13;

function draw() {
  let canvas = document.getElementById('tcanvas');
  let context = canvas.getContext("2d");
  canvas.fillstyle = "#0000FF";
  context.lineWidth = 3;
  context.beginPath();
  context.moveTo(50, 100);
  context.lineTo(150, 100);
  context.lineTo(100, 50);
  context.lineTo(50, 100);
  context.fill();
  context.closePath();
}

window.onload = draw;

＆＃13;

#canvas {
  width: 400px;
  height: 200px;
  border: 1px solid red;
}

＆＃13;

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

＆＃13;

Answer 2

确实如此，您只是拥有未定义的init并且会破坏您的代码。可能在别处定义但是包含错误/ s？另一个可能的原因可能是你在html中链接它的地方缺少一个canvasjs，我们无法检查：）

浏览器的控制台（F12）在这种情况下是你的朋友。

这是快速工作fiddle

请注意，这是显示代码的首选方式，因为它更易于测试，也更容易被其他人跳转。

<canvas id="tcanvas">

  function draw() {
    var canvas = document.getElementById('tcanvas');
    var context=canvas.getContext("2d");

      canvas.fillstyle="#0000FF";
      context.lineWidth=3;
      context.beginPath();
      context.moveTo(50,100);
      context.lineTo(150,100);
      context.lineTo(100,50);
      context.lineTo(50,100);
      context.fill();
      context.closePath();
    }

 #canvas {
       width: 400px; 
       height: 200px; 
       border: 1px solid red; 
 }

html5画布没有绘制三角形

2 个答案: