使用Javascript在画布中显示图像？_Javascript_Html

使用Javascript在画布中显示图像？

javascript html

使用Javascript在画布中显示图像？,javascript,html,Javascript,Html,我希望能够在我的页面上点击一个按钮，并在X，Y坐标处将图像加载到画布中下面的代码就是我所拥有的。我希望图像位于image/photo.jpg或同一目录中，但最好位于主页的子目录中 **问题：如何通过点击网页上的按钮使JPG显示在画布上代码：函数draw（）{ var ctx=document.getElementById（“myCanvas”）.getContext（“2d”）； var img=new Image（）： //img.src=“2c.jpg”； img.src=“/ima

我希望能够在我的页面上点击一个按钮，并在X，Y坐标处将图像加载到画布中

下面的代码就是我所拥有的。我希望图像位于image/photo.jpg或同一目录中，但最好位于主页的子目录中

**问题：如何通过点击网页上的按钮使JPG显示在画布上

代码：


函数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）；
}
在画布上显示图像
您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.font=“20px Arial”；
ctx.fillText（“皇家同花顺$”，500,50）；
ctx.fillText（“Striaght Flush$”，500,80）；
ctx.fillText（“Flush$”，500110）；
ctx.fillText（“四个同类$”，500140）；
ctx.fillText（“全文$”，500170）；
ctx.fillText（“三个同类$”，500200）；
ctx.fillText（“两对$”，500230）；
ctx.fillText（“一对ACE$”，500260）；
ctx.rect（495,10270350）；
ctx.stroke（）；

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>


帆布{
边框：5px纯黑；
}
添加图像#1
添加图像#2
var图像={}；
函数加载图像（列表）{
var合计=0；
document.querySelector（“span”）.innerText=“…加载…””；
对于（变量i=0；i

等待图像加载后再绘制：

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

演示：

如果游戏中有多个图像，最好在开始之前预加载所有图像

预加载图像：（不带jQuery:）

如果您更熟悉：

函数ImageCollection（列表，回调）{
var total=0，images={}；//private:）
对于（变量i=0；i

图像img.src在前面还是onload在前面，因为img.src在img.onload之后，所以它是如何绘制的。我在这里看不到。只是试了一下，它也不起作用。我将通过新代码或上面的脚本部分。@user3376708-

onload

应该是第一个，因为一旦你设置了

src

@user3376708，你的图像就会开始加载-为什么你要设置

src

两次？我对javascript是新手，这对我来说似乎是鸡眼。因此，当您有img.src时，您必须在其正上方有一个img.onload=函数。这是我不确定的，但无论哪种方式都不起作用。

var img=new Image:

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

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