可以在 DOM jQuery 中使用 canvas 元素吗？

Posted 2023-05-09

【中文标题】可以在 DOM jQuery 中使用 canvas 元素吗？

【英文标题】：Is that possible to use canvas element in DOM jQuery?

【发布时间】：2021-06-15 20:41:11

【问题描述】：

我是 jquery 的新手。

可以在 DOM jquery 中添加画布类吗？ 画布类包括我想用于我的 api 的 Skycons 图标。

 $.ajax (
 url: "url",
  type: "GET",
  dataType: 'json',
  success: function(e) 

       let icon = e.weather[0].icon;
          switch (icon) 
            case "01d":
              icon = "CLEAR_DAY";
              break;
            case "01n":
              icon = "CLEAR_NIGHT";
              break;
            case "02d":
              icon = "PARTLY_CLOUDY_DAY";
              break;
            case "02n":
              icon = "PARTLY_CLOUDY_NIGHT";
              break;
            case "03d":
              icon = "CLOUDY";
              break;
            case "03n":
              icon = "CLOUDY";
              break;
            case "04d":
              icon = "CLOUDY";
              break;
            case "04n":
              icon = "CLOUDY";
              break;
            case "09d":
              icon = "RAIN";
             break;
            case "09n":
              icon = "RAIN";
              break;
            case "10d":
              icon = "RAIN";
              break;
            case "10n":
              icon = "RAIN";
              break;
            case "11d":
              icon = "RAIN";
              break;
            case "11n":
              icon = "RAIN";
              break;
            case "13d":
              icon = "SNOW";
              break;
            case "13n":
              icon = "SNOW";
              break;
            case "50d":
              icon = "FOG";
              break;
            case "50n":
              icon = "FOG";
              break;
           

然后添加函数

 setIcons(icon, document.querySelector(".icon"));

        function setIcons(icon, iconID) 
          const skycons = new Skycons( color: "white" );
          const currentIcon = icon;
           skycons.play();
         return skycons.set(iconID, Skycons[currentIcon]);
      
    let variable ='';

    variable += '<div class="row h-100">';
    variable += '   <canvas class="icon"  ></canvas>';        
    variable += '</div>';

    $('#letWeather').html(variable);

 
);

然后把这个id加到Html..

<div id="letWeather"></div>

它不显示...

但如果我在 DOM 之外将其添加到 HTML。它确实有效。为什么？

<canvas class="icon"  ></canvas>

【问题讨论】：

这很可能是因为let 是reserved keyword 并且无法重新分配。您应该会在浏览器控制台中看到一个错误。

"是否可以 [使用] jquery [添加] 画布元素" - 是的，当然可以。确保您在 doc.ready 中运行您的 jquery 代码（将其包装在 $(function() ...here ... ) 中，或者您的代码在页面上的 letWeather 元素之后运行。

您的代码在 doc.ready 中运行良好：jsfiddle.net/Lr1ufa6y/1（不是 jsfiddle 将代码放在最后）

关于let 作为变量名：我当然会考虑使用不同的名称，但您可以将其用作变量名而不会出现问题。 let = '' 与 window.let = '' 相同，您也可以使用 var let = ''，但您不能使用 let let = ''

我编辑了我的帖子。 let 没有错。我知道这是怎么回事..

【参考方案1】：

看看你做事的顺序。

首先，您在 DOM 中搜索类为 icon 的元素，然后stuff 使用您找到的任何内容。

接下来，您将创建一个包含一些 HTML 的字符串，其中包含具有该类的元素。

最后，您使用该 HTML 将该元素添加到 DOM。

---

如果您在将其添加到 DOM 之前在 DOM 中搜索它，您将不会找到它。

【讨论】：

如果你想为我解释更多可能会很好。你的意思是我不会找到它。

我的意思是，如果你拿一张空白纸，读出上面写的内容，然后写下“这是一个图标”，那么你读出的单词将是“”而不是“这是一个图标”。

颠倒三个步骤的顺序。