Afficher l'image en toile avec Javascript?

Je veux être en mesure de cliquer sur un bouton sur ma page et de charger une image dans un canvas à certains des coordonnées X,Y?

Le code suivant est ce que j'ai ci-dessous. Je souhaite que l'image soit en image/photo.jpg ou dans le même répertoire, mais de préférence dans un sous-répertoire de la page principale.

**Question: Comment faire un JPG affiche dans une zone de travail avec le clic d'un bouton sur la page web?

Code:

<!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>

Mars 6th, 2014 Code:

Comment le code suivant ne fonctionne pas. Avez-vous d'avoir une étiquette d'identité sur la Toile. La page d'affichage, mais pour une raison quelconque, l'image ne sera pas lorsque le bouton est cliqué. L'image est dans le même répertoire que mon index.html le fichier est en.

<!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>
  • var img = new Image: <- ;
InformationsquelleAutor | 2014-03-06