用Javascript在画布上显示图像？

Question

我希望能够点击页面上的按钮并将图像加载到某些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日代码：

以下代码如何不起作用。 你必须在Canvas上有一个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>

Answer 1

等到图像加载后再绘制：

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);

用Javascript在画布上显示图像？

问题描述

1 个解决方案

解决方案1
12 已采纳 2014-03-06 02:21:31

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

用Javascript在画布上显示图像？

问题描述

1 个解决方案

解决方案1 12 已采纳 2014-03-06 02:21:31

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

解决方案1
12 已采纳 2014-03-06 02:21:31