HTML Холст не работает по любой причине - PullRequest
Новая
       7

HTML Холст не работает по любой причине

0 голосов
/ 04 мая 2020

Так что я совсем новичок в программировании, и это может показаться вам очевидным, но я не могу понять, почему следующий код не будет работать (первые три строки скрипта не нужны для другой части полная веб-страница, но я не понимаю, почему это мешало бы остальной части кода работать): 

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

  <script>

    document.getElementById("demo2").innerHTML = "Text und Hintergrund per Java erstellt, font-size ist hier fontSize";
    document.getElementById("demo2").style.background = "red";
    document.getElementsById("demo2").style.fontSize = "190%";


    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    // Create gradient
    var grd = ctx.createLinearGradient(0,0,200,0);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
    // Fill with gradient
    ctx.fillStyle = grd;
    ctx.fillRect(10,10,150,80);
    </script>

</body>
</html>

Ответы [ 3 ]

1 голос
/ 04 мая 2020

Как вы сказали ранее, первые три строки вашего кода мешают работать с остальными вашими кодами.

Так почему это происходит?

javascript - это однопоточный язык , поэтому он будет go в ваш код строка за строкой 

1| document.getElementById("demo2").innerHTML = "Text und Hintergrund per Java erstellt, font-size ist hier fontSize";
2| document.getElementById("demo2").style.background = "red";
3| document.getElementsById("demo2").style.fontSize = "190%";
...

Так что, когда вы получите это, он будет запускать первую строку, затем вторую, а затем остальные строки за строкой. Благодаря этой функции всякий раз, когда одна из ваших строк выдает ошибку, остальные функции будут остановлены .

Что тогда мы можем сделать в вашем случае?

Так как вы получили тот же сценарий для нескольких страниц, затем вы должны рассмотреть, какую часть кода вы хотите запустить (на самом деле, какая часть работает).

Есть несколько способов сделать это:

  1. Задать условия в ваших сценариях

В этом подходе вы должны определить набор условий для проверки наличия элементов на странице, поэтому ваш код должен выглядеть примерно так: 

<!DOCTYPE html>
<html>

<body>
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

  <script>
    var demo2 = document.getElementById("demo2");

    if (demo2) {
      demo2.innerHTML = "Text und Hintergrund per Java erstellt, font-size ist hier fontSize";
      demo2.style.background = "red";
      demo2.style.fontSize = "190%";
    }

    var c = document.getElementById("myCanvas");
    
    if (c) {
      var ctx = c.getContext("2d");
      // Create gradient
      var grd = ctx.createLinearGradient(0, 0, 200, 0);
      grd.addColorStop(0, "red");
      grd.addColorStop(1, "white");
      // Fill with gradient
      ctx.fillStyle = grd;
      ctx.fillRect(10, 10, 150, 80);
    }
  </script>

</body>

</html>
Сделайте ваш код модульным

Для запуска каждой указанной части кода c вы можете создать два разных модуля, поэтому давайте предположим, что первый: 

// demo2.js
document.getElementById("demo2").innerHTML = "Text und Hintergrund per Java erstellt, font-size ist hier fontSize";
document.getElementById("demo2").style.background = "red";
document.getElementsById("demo2").style.fontSize = "190%";

и вторая часть: 

// canvas.js
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

, и это страница, которую вы используете demo2: 

<!DOCTYPE html>
<html>

<body>
  <div id='demo2'>
    ...
  </div>

  <script src="./demo2.js"></script> // I just assuemed they both are in same directory
</body>

</html>

, и это страница, которую вы используете холст: 

<!DOCTYPE html>
<html>

<body>
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML canvas tag.</canvas>

  <script src="./canvas.js"></script> // I just assuemed they both are in same directory
</body>

</html>
Создайте пустые элементы div с display: none; на каждой странице, чтобы предотвратить ошибку (совсем не желательно)

Этот подход вообще не предпочтителен, потому что вы добавите бесполезный элемент для вашей DOM и только увеличивает вашу DOM без причины. 

<!DOCTYPE html>
<html>

<body>
  <div style="display: none;" id="demo2"></div>
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

  <script>
    var demo2 = document.getElementById("demo2");
    demo2.innerHTML = "Text und Hintergrund per Java erstellt, font-size ist hier fontSize";
    demo2.style.background = "red";
    demo2.style.fontSize = "190%";

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    // Create gradient
    var grd = ctx.createLinearGradient(0, 0, 200, 0);
    grd.addColorStop(0, "red");
    grd.addColorStop(1, "white");
    // Fill with gradient
    ctx.fillStyle = grd;
    ctx.fillRect(10, 10, 150, 80);
  </script>

</body>

</html>
1 голос
/ 04 мая 2020

Работает нормально.

Я удалил первые 3 строки кода, потому что элемент не существует, и это приводит к сбою вашего JS

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

  <script>

  

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    // Create gradient
    var grd = ctx.createLinearGradient(0,0,200,0);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
    // Fill with gradient
    ctx.fillStyle = grd;
    ctx.fillRect(10,10,150,80);
    </script>

</body>
</html>
0 голосов
/ 04 мая 2020

Полагаю, вы хотите что-то вроде этого: 

const setup = () => {

  const demo2 = document.getElementById("demo2");
  if(demo2 !== null) {
    demo2.textContent = "Text und Hintergrund per Java erstellt, font-size ist hier fontSize";
    demo2.style.background = "red";
    demo2.style.fontSize = "190%";
  }

  const c = document.getElementById("myCanvas");
  if(c !== null) {
    let ctx = c.getContext("2d");
    // Create gradient
    let grd = ctx.createLinearGradient(0,0,200,0);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
    // Fill with gradient
    ctx.fillStyle = grd;
    ctx.fillRect(10,10,150,80);
  }

}

//load
window.addEventListener('load', setup);
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...