我希望能够点击页面上的按钮并将图像加载到某些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);
}
</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 $",80);
ctx.fillText("Flush $",110);
ctx.fillText("Four of a Kind $",140);
ctx.fillText("Full House $",170);
ctx.fillText("Three of a Kind $",200);
ctx.fillText("Two Pair $",230);
ctx.fillText("Pair of ACES $",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],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>
解决方法
等到图像加载后再绘制：
var img = new Image();
img.onload = function(){ /*or*/ img.addEventListener("load",function(){
ctx.drawImage(img,0); ctx.drawImage(img,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);
