Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.12.2019, 10:39
Аспирант
Отправить личное сообщение для Jimy Посмотреть профиль Найти все сообщения от Jimy
 
Регистрация: 21.03.2019
Сообщений: 64

Простой вопрос про изменение изображений
Добрый день. Есть объект на канвасе (рисуется окружность, внутрь вставляется картинка, типа круглой кнопки...) Подскажите, как при щелчке мышью на этом объекте менять картинку (была png1, стала png2 и наоборот) . Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 23.12.2019, 12:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #3 (permalink)  
Старый 23.12.2019, 12:34
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от 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>
Картинки меняются по кругу. Нажатие считается в случае нажатия внутрь круга.

Последний раз редактировалось Malleys, 23.12.2019 в 12:42.
Ответить с цитированием
  #4 (permalink)  
Старый 23.12.2019, 14:59
Аспирант
Отправить личное сообщение для Jimy Посмотреть профиль Найти все сообщения от Jimy
 
Регистрация: 21.03.2019
Сообщений: 64

Всем спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Очень простой вопрос про аудио и JS eirnvn jQuery 8 08.07.2013 14:39
Вопрос про сравнения san4es Javascript под браузер 4 01.04.2012 16:56
Вопрос по Dreamweaver 5.5 (часть вторая) но уже про новый - built 5315 jsuse Общие вопросы Javascript 4 24.02.2012 21:36
Простой вопрос yuri.gordeev Общие вопросы Javascript 5 10.02.2012 14:31
Вопрос: И опять про offsetLeft... sigurd Общие вопросы Javascript 11 04.10.2010 14:06