Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.12.2017, 22:04
Аспирант
Отправить личное сообщение для marc Посмотреть профиль Найти все сообщения от marc
 
Регистрация: 02.12.2017
Сообщений: 81

Canvas, смена картинки
Привет, у меня есть скрипт на jQuery для смены картинок по наведению курсора. Помогите мне пожалуйста переделать этот код только под Canvas.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
 
  //onhover image
  $('.js-hover').hover(function() {
    var _this = this,
      images = _this.getAttribute('data').split(','),
      counter = 0;
 
    this.setAttribute('data-src', this.src);
    _this.timer = setInterval(function(){
      if(counter > images.length) {
        counter = 0;
      }
      if (images[counter] != undefined) {
        _this.src = images[counter];
      } else {
        _this.src = _this.getAttribute('data-src');
      }
 
      counter++;
    }, 750);
 
  }, function() {
    this.src = this.getAttribute('data-src');
    clearInterval(this.timer);
  });
 
});
</script>
</head>
<body>
  <img class="js-hover" alt="" src="img/1.jpg" data="img/3.jpg">
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 24.12.2017, 22:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

marc,
что мешает посмотреть документацию на Canvas?
Ответить с цитированием
  #3 (permalink)  
Старый 24.12.2017, 22:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

marc,
<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript">
        function imgChange(imagePath) {
            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;
}
        </script>
    </head>

    <body onload="imgChange('https://pp.userapi.com/c633918/v633918277/3ce19/QJAj0GIFXKE.jpg')">

            <canvas id="myCanvas" width="200" height="200"
 style="border:1px solid #c3c3c3;"   onmouseover="imgChange('http://cdn.the-village.ru/auth.look-at-media.com/profile-userpic/ydBwHC0x7Lysk6P_GiT17Q.jpg')"  onmouseout="imgChange('https://pp.userapi.com/c633918/v633918277/3ce19/QJAj0GIFXKE.jpg')">
            Your browser does not support the canvas element.
            </canvas>

    </body>

</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Что-то не работает: смена картинки по клику. pro_moscow Элементы интерфейса 4 05.08.2016 05:01
Перенести с картинки в canvas mmmaks2004 Элементы интерфейса 5 28.02.2016 13:25
Смена картинки при нажатии на маленькие картинки comb Элементы интерфейса 4 23.03.2015 01:08
canvas drawImage обрезает большие картинки bona Общие вопросы Javascript 4 25.03.2014 13:15
Смена картинки по времени Gwin jQuery 4 16.02.2014 20:02