畫布上未顯示線條圖

Question

我試圖在上面畫一條簡單的線，但它在頁面上不起作用。 我已經把我的 JavaScript 放在了 html 頁面的幾個地方，但它仍然不起作用。

有誰知道我做錯了什么？

謝謝

我的 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();

}

我的 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

從窗口的加載而不是從畫布元素調用 drawLine 方法：

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

和你的 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>

還有你的 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