更改画布中单击的图像 [英] changing the clicked image in the canvas
问题描述
我在做这个简单的画布。它有三个图像（相同的图像）。我想只更改点击的图像。我想做的是将图像顺序保存在数组中。并且只改变被点击的图像的索引。
到目前为止我无能为力了！我做了它与硬编码，但cnt做这一般，因为我不知道用户单击的位置。如果我可以得到鼠标的位置，当它被点击或图像的点击，我可以做一些事情，但我是新的在html5，所以我不知道如何这样做，任何一个点我在右边方向？这是我的代码
< 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 ，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 =myCanvaswidth =1250height =650>
< / canvas>
< button id =changetype =button>更改< / button>
< / body>
这是我怎么做的。基本上你需要存储每个图像的 x，y，width，height 。您需要这些值，以便当您在画布中单击时，您可以检查每个图像的边界与鼠标点击的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，宽：50，高：50}）;
//绘制一些矩形，这将是你的图像
for（var i = 0; i< images.length; i ++）{
ctx.fillRect 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;
//这是你浏览所有图像的地方，并检查鼠标事件对你的图像的x和y。
for（var i = 0; i
ctx.strokeRect [i] .x，images [i] .y，images [i] .width，images [i] .height）;
alert（'Image'+ i +'selected'）;
}
}
}
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 array . 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>
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');
}
}
}
这篇关于更改画布中单击的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
