Javascript 更改画布中单击的图像
我正在制作这个简单的画布。它有三个图像（相同的图像）。我只想更改单击的图像。我要做的是将图像顺序保存在数组中。并且，仅更改单击的图像的索引。 到目前为止，我不知道该怎么做！我已经用硬编码完成了，但cnt一般都这么做，因为我不知道用户点击了哪里。如果我能得到鼠标被点击时的位置或点击图像的id，我可以做一些事情，但我是html5新手，所以我不知道如何做，有人能给我指出正确的方向吗？这是我的密码Javascript 更改画布中单击的图像,javascript,html,canvas,Javascript,Html,Canvas,我正在制作这个简单的画布。它有三个图像（相同的图像）。我只想更改单击的图像。我要做的是将图像顺序保存在数组中。并且，仅更改单击的图像的索引。 到目前为止，我不知道该怎么做！我已经用硬编码完成了，但cnt一般都这么做，因为我不知道用户点击了哪里。如果我能得到鼠标被点击时的位置或点击图像的id，我可以做一些事情，但我是html5新手，所以我不知道如何做，有人能给我指出正确的方向吗？这是我的密码 <style> body { margin:
<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>
身体{
边际：0px；
填充：0px；
}
#我的画布{
边框：2px实心#9C9898；
}
if（window.addEventListener）{
window.addEventListener（'load'，函数（）
{
var my=新数组（）；
var i=0；
var canvas=document.getElementById（“myCanvas”）；
var context=canvas.getContext（“2d”）；
var imageObj=新图像（）；
var imageObj1=新图像（）；
imageObj.onload=函数（）{
imageObj1.src=“西瓜鸭轮廓.png”；
对于（变量x=0；x=0；x-=400）{
如果（i！=2）{my[i]=imageObj；}否则{my[i]=imageObj1；}
drawImage（my[i]，x，0）；
我--；
}}
init（）；
}，假）；}
改变
x、y、宽度和高度。您需要这些值，以便在画布中单击时，可以对照鼠标单击的x和y检查每个图像的边界。之后，它很容易参考图像被点击。希望下面的代码足以让您走上正确的轨道
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');
}
}
}
var canvas=document.getElementById（“myCanvas”），
ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“#f00”；
ctx.strokeStyle=“#0f0”；
var图像=[]；
推送（{x:10，y:10，宽度：50，高度：50}，{x:70，y:10，宽度：50，高度：50}，{x:130，y:10，宽度：50，高度：50}）；
//画一些矩形，这将是你的图像
对于（var i=0；iimages[i].x&&ximages[i].y&&y
wht是（e）？我很抱歉听起来像dum，但我对html5是新的e
只是点击事件的事件对象，它的值可用，比如用户点击的x
和y
。那么函数定义是什么呢？功能按钮向下（e）？？因为我想在点击按钮的时候做这个功能，嗯，我想我是糊涂了。为了获得用户单击的图像，您必须有一个单击事件。“更改”按钮应该做什么？以不同的顺序重新绘制图像？实际上我有多个图像来替换所选的图像，所以按下按钮选择图像。但是使用这个函数，我需要点击图像的x，y坐标。这样我就可以知道点击了哪个图像。请在函数定义和如何调用方面提供帮助？