Форум

Jimy · #1 (**permalink**) 23.12.2019, 10:39

Добрый день. Есть объект на канвасе (рисуется окружность, внутрь вставляется картинка, типа круглой кнопки...) Подскажите, как при щелчке мышью на этом объекте менять картинку (была png1, стала png2 и наоборот) . Спасибо.

рони · #2 (**permalink**) 23.12.2019, 12:08

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>

Malleys · #3 (**permalink**) 23.12.2019, 12:34

Сообщение от 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>

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

Jimy · #4 (**permalink**) 23.12.2019, 14:59

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

Форум

Справочник

Discord чат

Курсы javascript