changing the clicked image in the canvas_问答_开发者

changing the clicked image in the canvas

开发者 https://www.devze.com 2023-04-04 20:58 出处：网络

i am making this simple canvas . it has three images in it (identical images). i want to change only the clicked image. what i am trying to do is save the image order in a ar开发者_如何学Cray . and only the change the index of the image which was clicked . so far i am clueless how to do so ! i have done it with hard coded but cnt do this in general as i dnt know where the user clicked . if i could get the position of the mouse when it was clicked or the id of the image which was clicked i could do something but i am new in html5 so i have no idea how to do so , can any one point me in the right direction ? here is my code

    <style> 
        body {
            margin: 0px;
            padding: 0px;
        }

        #myCanvas {
            border: 2px solid #9C9898;
        }
    </style> 
    <script> 

       if(window.addEventListener) {

window.addEventListener('load', function ()
{

           var my = new Array();
var i=0;
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            var imageObj = new Image();
            var imageObj1 = new Image();
            imageObj.onload = function(){
 imageObj1.src = "watermelon-duck-outline.png";
 for (var x = 0; x <= 1200;x += 400 ) { alert(i,x);
  my[i]=imageObj;
 context.drawImage(imageObj, x, 0);
++i;
}
context.drawImage(imageObj, 0, 0);
            }
            imageObj.src = "tomato2.jpg";

            change.addEventListener('mousedown', function ()      {ButtonDown (change)}, false);

            function ButtonDown (change)
{ canvas.width = canvas.width; 
 i--;
 for (var x = 800; x >= 0;x -= 400 ) {
  if(i!=2){my[i]=imageObj;}else{my[i]=imageObj1;}
 context.drawImage(my[i], x, 0);
i--;
}}



         init();
}, false); }
    </script> 
</head> 
<body >

    <canvas id="myCanvas" width="1250" height="650"> 
    </canvas>
    <button id="change" type="button">Change</button>

</body>

Live Demo

This is how I would do it. Basically you need to store the x,y,width,height of each image. You need these values so that when you click within the canvas you can check the bounds of each image against the x and y of the mouse click. After that its easy to reference which image was clicked. Hopefully the following code is enough to get you on the right track.

var canvas = document.getElementById("myCanvas"),
    ctx = canvas.getContext("2d");

ctx.fillStyle = "#f00";
ctx.strokeStyle = "#0f0";

var images = [];
images.push({x : 10, y : 10, width:50, height:50}, {x : 70, y : 10, width:50, height:50}, {x : 130, y : 10, width:50, height:50});

//draw some rects, this would be your images
for(var i = 0; i < images.length; i++){
    ctx.fillRect(images[i].x, images[i].y, images[i].width, images[i].height); 
}

canvas.onclick = function(e){
    var x = 0,
        y = 0;

    if (e.pageX || e.pageY) { 
        x = e.pageX;
        y = e.pageY;
    }
    else { 
        x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
        y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
    } 

    x -= canvas.offsetLeft;
    y -= canvas.offsetTop;

// This is where you go through all the images, and check the x and y from the mouse event against your images.
    for(var i = 0; i < images.length; i++){
        if(x > images[i].x && x < images[i].x + images[i].width && y > images[i].y && y < images[i].y + images[i].height){
            ctx.strokeRect(images[i].x, images[i].y, images[i].width, images[i].height); 
          alert('Image ' + i + ' selected');  
        }
    }
}