Javascript-форум - Простой вопрос про изменение изображений

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Простой вопрос про изменение изображений (https://javascript.ru/forum/dom-window/79135-prostojj-vopros-pro-izmenenie-izobrazhenijj.html)

Простой вопрос про изменение изображений

Добрый день. Есть объект на канвасе (рисуется окружность, внутрь вставляется картинка, типа круглой кнопки...) Подскажите, как при щелчке мышью на этом объекте менять картинку (была 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>

Цитата:

Сообщение от Jimy

рисуется окружность, внутрь вставляется картинка, типа круглой кнопки...

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

Картинки меняются по кругу. Нажатие считается в случае нажатия внутрь круга.

Всем спасибо! :)