为什么画布不在本地工作，而是在 TRYIT 工作答案

【问题标题】：Why canvas is not working locally but working on TRYIT为什么画布不在本地工作，而是在 TRYIT 工作
【发布时间】：2020-06-15 01:00:39
【问题描述】：

我已经构建了一些与画布相关的代码，但代码正在 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>

控制台上没有错误，但它在控制台中显示以下警告：

【问题讨论】：

我想您的控制台中可能存在与 CORS 相关的错误，您检查过那里的任何错误吗？
@DBS 很好，控制台上实际上没有错误，它显示了一些与 DevTools failed to parse SourceMap 相关的警告
嗯，这可能是一个速度问题，你似乎没有在使用之前等待图像加载。
是的，我刚刚检查了浏览器，当我将方法从 onload 更改为 onlick 时，它显示
在这种情况下，您可能会等待使用类似这样的东西来等待图像加载（您在 JS 中创建图像，因此当文档完成加载时它们不存在）：stackoverflow.com/a/29572590/1650337

标签： javascript html canvas

【解决方案1】：

正如@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>

【讨论】：