Простой вопрос про изменение изображений
Добрый день. Есть объект на канвасе (рисуется окружность, внутрь вставляется картинка, типа круглой кнопки...) Подскажите, как при щелчке мышью на этом объекте менять картинку (была png1, стала png2 и наоборот) . Спасибо.
|
canvas смена картинки по клику
Jimy,
<!DOCTYPE HTML>
<html>
<head>
<script>
var imagePath = ['https://pp.userapi.com/c633918/v633918277/3ce19/QJAj0GIFXKE.jpg',
'http://cdn.the-village.ru/auth.look-at-media.com/profile-userpic/ydBwHC0x7Lysk6P_GiT17Q.jpg'],
index = 0;
function imgChange() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
};
img.src=imagePath[index];
index = ++index % imagePath.length;
}
</script>
</head>
<body onload="imgChange()">
<canvas id="myCanvas" width="200" height="200"
style="border:1px solid #c3c3c3;" onclick="imgChange()">
Your browser does not support the canvas element.
</canvas>
</body>
</html>
|
Цитата:
<canvas width="100" height="100"></canvas>
<script>
const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");
let index = 0;
const CIRCLE_X = 50, CIRCLE_Y = 50, CIRCLE_R = 40;
const loadedImages = Promise.all([
"https://picsum.photos/id/237/100/100",
"https://picsum.photos/id/238/100/100"
].map(src => new Promise((resolve, reject) => {
const image = new Image()
image.onload = resolve.bind(null, image)
image.src = src
})));
loadedImages.then(changeImage);
function changeImage(images) {
context.clearRect(0, 0, canvas.width, canvas.height);
const image = images[index++ % images.length];
context.save();
context.beginPath();
context.arc(CIRCLE_X, CIRCLE_Y, CIRCLE_R, 0, 2 * Math.PI, true);
context.closePath();
context.clip();
context.drawImage(image, CIRCLE_X - CIRCLE_R, CIRCLE_Y - CIRCLE_R, 2 * CIRCLE_R, 2 * CIRCLE_R);
context.restore();
}
canvas.addEventListener("click", event => {
if((event.offsetX - CIRCLE_X) ** 2 + (event.offsetY - CIRCLE_Y) ** 2 <= CIRCLE_R ** 2)
loadedImages.then(changeImage);
});
</script>
Картинки меняются по кругу. Нажатие считается в случае нажатия внутрь круга. |
Всем спасибо! :)
|
| Часовой пояс GMT +3, время: 11:58. |