Почему canvas не работает локально, а работает на TRYIT - PullRequest
1 голос
/ 02 марта 2020

Я создал код, связанный с canvas, но код работает на TRYIT , но код не работает локально, когда я скопировал весь код в файл и попытался его запустить.

Это это то, что делает этот код, он берет изображение и устанавливает ширину и высоту холста относительно этого изображения и рисует закрашенный круг с текстом на нем на этом изображении (холст).

Вот код

      <head>
  <meta charset=utf-8 />
  <title>Draw a circle</title>
  </head>
  <body onload="draw();">
  <canvas   id="circle"></canvas>
  </body>
  <script>

  var canvas = document.getElementById('circle'),
  context = canvas.getContext('2d');

  function draw()
  {

  base_image = new Image();
  base_image.src = 'http://sst-system.com/old/Planos/C21E34.JPG';


  var canvas = document.getElementById('circle');
  if (canvas.getContext)
  {
  base_image = new Image();
  base_image.src = 'http://sst-system.com/old/Planos/C21E34.JPG';
  var ctx = canvas.getContext('2d'); 
        ctx.beginPath();

  ctx.canvas.width  = base_image.width;
  ctx.canvas.height = base_image.height;
  var X = 500;
  var Y =  229;
  var R = 6.4;
  ctx.font = "15px Arial bold";
  ctx.beginPath();
  ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
  ctx.lineWidth = 12;
  ctx.strokeStyle = '#FF0000';
  ctx.drawImage(base_image, 0, 0)
  ctx.stroke();
  ctx.fillText("TT", X-9, Y+5);

  }
  }
  </script>

На консоли нет ошибок, но в консоли отображаются следующие предупреждения: enter image description here

1 Ответ

0 голосов
/ 02 марта 2020

Как упоминалось @DBS, это была скорость. Вы не ждали загрузки изображения, прежде чем работать с ним.

Исправление состоит в том, чтобы прикрепить слушателя к событию load изображения, используя либо image.addEventListener('load', () => {, либо устаревший стиль image.onload = () => {, который я использовал ниже.

Причина, по которой это работает в примере TryIt, заключается в том, что изображение кэшируется браузером со второй загрузки и далее, поэтому оно доступно сразу, и вам не нужно ждать его загрузки.

Я подозреваю, что когда вы запускаете его локально, если у вас открыт Devtools, кеш отключается из-за параметра в настройках Devtools, который называется «Отключить кеш (при открытом DevTools)». Поэтому он никогда не будет извлечен из кэша и, следовательно, никогда не будет работать.

Следующий код работает:

<html>

<head>
  <meta charset=utf-8 />
  <title>Draw a circle</title>
</head>

<body onload="draw();">
  <canvas id="circle"></canvas>
</body>
<script>
  var canvas = document.getElementById('circle'),
    context = canvas.getContext('2d');

  function draw() {

    base_image = new Image();
    base_image.src = 'http://sst-system.com/old/Planos/C21E34.JPG';


    var canvas = document.getElementById('circle');
    if (canvas.getContext) {
      base_image = new Image();
      base_image.src = 'http://sst-system.com/old/Planos/C21E34.JPG';
      // The key change: put the rest of the code inside the onload callback
      // to wait for the image to load before using it.
      base_image.onload = function() {
        var ctx = canvas.getContext('2d');
        ctx.beginPath();

        ctx.canvas.width = base_image.width;
        ctx.canvas.height = base_image.height;
        var X = 500;
        var Y = 229;
        var R = 6.4;
        ctx.font = "15px Arial bold";
        ctx.beginPath();
        ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
        ctx.lineWidth = 12;
        ctx.strokeStyle = '#FF0000';
        ctx.drawImage(base_image, 0, 0)
        ctx.stroke();
        ctx.fillText("TT", X - 9, Y + 5);
      };

    }
  }
</script>

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