Question

我在我的网站上使用了这个代码，但是当页面打开时图像没有加载，我希望图像从启动时加载，然后用简单的鼠标加载来更改图像和单击时的链接。我不擅长编码所以任何帮助都会很好。

这是我正在使用的代码。

<!doctype html>
<html>
 <body>
 <head>
  <script>
    function init() {
        setImageOne();
    }

    function setImageOne() { setImage('http://earthbounds.com/banners/amazing food.jpg'); }

    function setImageTwo() { setImage('http://earthbounds.com/banners/amazing food 2.jpg'); }

    function setImage(src) {
        var canvas = document.getElementById("e");
        var context = canvas.getContext("2d");
        if (context == null) return;
        var img = new Image();
        img.src = src;
        context.drawImage(img, 0, 0, 322, 200);
    }
  </script>
</head>

浏览器中没有画布支持

Answer 1

在绘制图像之前，您需要等待图像加载。此外，如果您的浏览器不支持画布，则没有任何东西可以帮助您使用此方法。

function setImage(src) {
    var canvas = document.getElementById("e");
    var context = canvas.getContext("2d");
    if (context == null) return;
    var img = new Image();
    img.onload = function () {
        context.drawImage(img, 0, 0, 322, 200);
    };
    img.src = src;

}

Answer 2

您应该等待加载图片。因此，您的代码应该是（有关html标记的更正）：

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta charset="utf-8">
  </head>
  <body>
    <canvas id="e" style="width: 100%; height: 100%;"></canvas>
  <script>
    function init() {
        setImageOne();
    }

    function setImageOne() { setImage('http://earthbounds.com/banners/amazing food.jpg'); }

    function setImageTwo() { setImage('http://earthbounds.com/banners/amazing food 2.jpg'); }

    function setImage(src) {
        var canvas = document.getElementById("e");
        var context = canvas.getContext("2d");
        if (context == null) return;
        var img = new Image;
        img.onload = function (){
            context.drawImage(img, 10, 10);
        };
        img.src = src;
    }
    init();
  </script>
  </body>
</html>

这仅适用于支持canvas ex：Chrome（ium）

的浏览器

另外，我建议您阅读this

Answer 3

这是你试过的第一种方法吗？如果您只是想在网站上添加图片并将鼠标悬停在网站上，则可以采用更加简单的方式。

首先，不使用Javascript创建和加载图片，而是使用HTML <img>标记，例如：

<img src="http://earthbounds.com/banners/amazing food.jpg">

现在要添加一个简单的悬停图片更改，这不是最佳做法，但对于一个示例，对于单个图片，您可以使用onmouseover和onmouseout，例如：

<img src="http://earthbounds.com/banners/amazing food.jpg" onmouseover="this.src('http://earthbounds.com/banners/amazing food 2.jpg')" onmouseout="this.src('http://earthbounds.com/banners/amazing food.jpg')">

现在，要将此图片设为指向您使用<a>标记的其他网页或网站的链接，例如：

<a href="www.google.ca"><img src="http://earthbounds.com/banners/amazing food.jpg" onmouseover="this.src('http://earthbounds.com/banners/amazing food 2.jpg')" onmouseout="this.src('http://earthbounds.com/banners/amazing food.jpg')"></a>

希望这会有所帮助，并继续寻找和学习！

图像未从启动加载

3 个答案: