如何使用Javascript在画布中显示图片？

Question

如何使用Javascript在画布中显示图片？

javascripthtml

9

我希望能够在网页上点击一个按钮，将一张图片加载到画布的某个X,Y坐标。

以下是我目前拥有的代码。我希望图片要么在image/photo.jpg中，要么在同一个目录下，但最好是主页面的子目录中。

问题：如何使一个JPG图片在网页上点击按钮后出现在画布上？

代码：

<!DOCTYPE html>
<html>

<script>
    function draw(){  
        var ctx = document.getElementById("myCanvas").getContext("2d");  
        var img = new Image():  
      //  img.src = "2c.jpg";  
        img.src = "/images/2c.jpg";  

        ctx.drawImage(img,0,0);  
    }


</script>


<body background="Black">

<div align="center">
    <button type="button" onclick="draw()">Show Image on Canvas</button> 

    <canvas id="myCanvas" width="900" height="400" style="border:2px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
    </canvas>
</div>

<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="20px Arial";

    ctx.fillText("Royal Flush     $",500,50);
    ctx.fillText("Striaght Flush  $",500,80);
    ctx.fillText("Flush           $",500,110);
    ctx.fillText("Four of a Kind  $",500,140);
    ctx.fillText("Full House      $",500,170);
    ctx.fillText("Three of a Kind $",500,200);
    ctx.fillText("Two Pair        $",500,230);
    ctx.fillText("Pair of ACES    $",500,260);


    ctx.rect(495,10,270,350);
    ctx.stroke();
</script>

</body>
</html>

2014年3月6日代码：

以下代码为什么不能正常工作呢？在画布上必须有一个ID标签吗？页面会显示，但是当点击按钮时，图片就无法显示了。这张图片与我的index.html文件在同一个目录中。

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>

<style type="text/css">
    canvas{
       border: 5px solid black;
    }
</style>

</html>
    <button id="galaxy">Add image #1</button>
    <button id="circles">Add image #2</button><span></span>
    <canvas width="500" height="500"></canvas>

<script>
  var Images = {};

function loadImages(list){
    var total = 0;
    document.querySelector("span").innerText = "...Loading...";
    for(var i = 0; i < list.length; i++){
        var img = new Image();
        Images[list[i].name] = img;
        img.onload = function(){
            total++;
            if(total == list.length){
                document.querySelector("span").innerText = "...Loaded.";
            }
        };
        img.src = list[i].url;
    }
}

function drawImage(img){
    var ctx = document.querySelector("canvas").getContext("2d");
    ctx.drawImage(Images[img], 0, 0, 50, 50);
}

loadImages([{
    name: "2c.jpg",
    url: "mp.jpg"
},{
    name: "mp.jpg",
    url: "mp.jpg"
}]);

document.querySelector("#galaxy").addEventListener("click", function(){
    drawImage("galaxy");
});

document.querySelector("#circles").addEventListener("click", function(){
    drawImage("weirdCircles");
});

</script>   

</html>

- user3376708

var img = new Image: <- ; - Josh C

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Derek 朕會功夫 · Accepted Answer

在绘制之前等待图像加载完成：

var img = new Image();
img.onload = function(){        /*or*/  img.addEventListener("load", function(){
    ctx.drawImage(img,0,0);                 ctx.drawImage(img,0,0);
};                                      };
img.src = "/images/2c.jpg";

演示： http://jsfiddle.net/DerekL/YcLgw/

如果您的游戏中有多个图像，

最好在开始前预加载所有图像。

预加载图像：http://jsfiddle.net/DerekL/uCQAH/（不使用jQuery：http://jsfiddle.net/DerekL/Lr9Gb/）

如果您更熟悉面向对象编程（OOP）：

http://jsfiddle.net/DerekL/2F2gu/

function ImageCollection(list, callback){
    var total = 0, images = {};   //private :)
    for(var i = 0; i < list.length; i++){
        var img = new Image();
        images[list[i].name] = img;
        img.onload = function(){
            total++;
            if(total == list.length){
                callback && callback();
            }
        };
        img.src = list[i].url;
    }
    this.get = function(name){
        return images[name] || (function(){throw "Not exist"})();
    };
}

//Create an ImageCollection to load and store my images
var images = new ImageCollection([{
    name: "MyImage", url: "//example.com/example.jpg"
}]);

//To pick and draw an image from the collection:
var ctx = document.querySelector("canvas").getContext("2d");
ctx.drawImage(images.get("MyImage"), 0, 0);