Рисование линии не отображается на холсте - PullRequest
Новая
       0

Рисование линии не отображается на холсте

0 голосов
/ 23 января 2020

Я пытаюсь нарисовать простую линию, но она не работает на странице. Я разместил свой 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>

1 Ответ

0 голосов
/ 23 января 2020

вызовите метод drawLine из загружаемого окна, а не из элемента canvas: 

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();
      }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...