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>
|
marc,
что мешает посмотреть документацию на Canvas? |
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>
|
| Часовой пояс GMT +3, время: 00:46. |