画布上未显示线条图

Question

I am trying to draw a simple line on but it doesn't work on the page.我试图在上面画一条简单的线，但它在页面上不起作用。 I have placed my JavaScript in several places on the html page, but it still doesn't work.我已经把我的 JavaScript 放在了 html 页面的几个地方，但它仍然不起作用。

Does anyone know what I did wrong?有谁知道我做错了什么？

Thank you谢谢

My JavaScript code:我的 JavaScript 代码：

function drawLine() {


var c = document.getElementById("line");
var draw = c.getContext("2d");

draw.beginPath();
draw.lineWidth("5");
draw.strokeStyle("blue");
draw.moveTo(0, 75);
draw.lineTo(0, 75);
draw.stroke();

}

My Html code:我的 HTML 代码：

<!DOCTYPE html>
<html lang="eng">
<script type="text/javascript" src="vhw.js"></script>
</head>

<body>

<script type="text/javascript" src="vhw.js"></script>

<!-- INTRODUCTION -->

<div>

  <h1 class="intro">
    Line
  </h1>

</div>

<!-- LINE CODE -->

<div class="space">
  <canvas id="line" width="500" height="300" style="border: 2px dotted #990099;    display: block; margin-right: auto; margin-left: auto;" onload="drawLine()">
  </canvas>
 </div>
</body>

</html>

Answer 1

call drawLine methode from onload of window not from canvas element :从窗口的加载而不是从画布元素调用 drawLine 方法：

window.onload = function(e){ 
drawLine();
}

and your html code like this :和你的 html 代码是这样的：

<div class="space">
  <canvas id="line" width="300" height="150" style="border: 2px dotted #990099;    
   display: block; margin-right: auto; margin-left: auto;" >
  </canvas>
 </div>

also your drawLine :还有你的 drawLine ：

function drawLine() {
    var canevas = document.getElementById('line');
    if (canevas.getContext) {
       var c = document.getElementById("line");
       var ctx = c.getContext("2d");
       ctx.beginPath();
       ctx.moveTo(0, 0);
       ctx.lineTo(300, 150);
       ctx.stroke();
      }
}

画布上未显示线条图

问题描述

1 个解决方案

解决方案1
0 2020-01-23 14:43:39

画布上未显示线条图

问题描述

1 个解决方案

解决方案1 0 2020-01-23 14:43:39

解决方案1
0 2020-01-23 14:43:39