HTML5 画布照片幻灯片放映问题
HTML5 canvas photo slide show issue
嗨,我在 Stackoverflow 上找到了用于画布照片幻灯片的这段代码,但我只是想知道如何使图像之间的过渡速度变慢?
var loaded = 0, numOfImages = 4;
//first part of chain, invoke async load
var image0 = document.createElement('img'); //this will work in new Chrome
var image1 = document.createElement('img'); //instead of new Image
var image2 = document.createElement('img');
var image3 = document.createElement('img');
//common event handler when images has loaded with counter
//to know that all images has loaded
image0.onload = image1.onload =
image2.onload = image3.onload = function(e) {
loaded+;
if (loaded === numOfImages)
draw(); // <-- second part of chain, invoke loop
}
//show if any error occurs
image0.onerror = image1.onerror =
image2.onerror = image3.onerror = function(e) {
console.log(e);
}
//invoke async loading... you can put these four into your
//window.onload if you want to
image0.src = "img/pic1.jpg";
image1.src = "img/pic2.jpg";
image2.src = "img/pic3.jpg";
image3.src = "img/pic4.jpg";
// this is the main function
function draw() {
var images = new Array(image0, image1, image2, image3),
counter = 0,
maxNum = images.length - 1,
myCanvas = document.getElementById('myCanvas'),
ctx = myCanvas.getContext('2d'),
me = this; //this we need for setTimeout()
//third part of chain, have a function to invoke by setTimeout
this._draw = function() {
//if the next image will cover the canvas
//there is no real need to clear the canvas first.
//I'll leave it here as you ask for this specifically
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height)
ctx.drawImage(images[counter++], 0, 0);
if (counter > maxNum) counter = 0;
setTimeout(me._draw, 1000); //here we use me instead of this
}
this._draw(); //START the loop
}
但我只是想知道如何使图像之间的过渡变慢?
您的加载方法中有拼写错误:
loaded++; // instead of loaded+;
setTimeout 控制延迟,直到再次调用me._draw。
例如,3 秒的延迟将是 3000 毫秒,如下所示:
setTimeout(me._draw, 3000);
如果你想要一个实际的过渡,你可以使用这样的东西:
使用过渡更改画布上的图像
这是代码和小提琴:http://jsfiddle.net/m1erickson/m8E6J/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var loaded = 0, numOfImages = 4;
//first part of chain, invoke async load
var image0 = document.createElement('img'); //this will work in new Chrome
var image1 = document.createElement('img'); //instead of new Image
var image2 = document.createElement('img');
var image3 = document.createElement('img');
//common event handler when images has loaded with counter
//to know that all images has loaded
image0.onload = image1.onload =
image2.onload = image3.onload = function(e) {
loaded++;
if (loaded === numOfImages)
draw(); // <-- second part of chain, invoke loop
}
//show if any error occurs
image0.onerror = image1.onerror =
image2.onerror = image3.onerror = function(e) {
console.log(e);
}
//invoke async loading... you can put these four into your
//window.onload if you want to
image0.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg";
image1.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-2.jpg";
image2.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-3.jpg";
image3.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-4.jpg";
// this is the main function
function draw() {
var images = new Array(image0, image1, image2, image3),
counter = 0,
maxNum = images.length - 1,
myCanvas = document.getElementById('myCanvas'),
ctx = myCanvas.getContext('2d'),
me = this; //this we need for setTimeout()
//third part of chain, have a function to invoke by setTimeout
this._draw = function() {
//if the next image will cover the canvas
//there is no real need to clear the canvas first.
//I'll leave it here as you ask for this specifically
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height)
ctx.drawImage(images[counter++], 0, 0);
if (counter > maxNum) counter = 0;
setTimeout(me._draw, 3000); //here we use me instead of this
}
this._draw(); //START the loop
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="myCanvas" width=600 height=400></canvas>
</body>
</html>
相关文章:
- jQuery幻灯片放映问题-幻灯片放映不起作用
- JSSOR Slider中的空幻灯片和goto-currentIndex属性在javascript中不起作用的问题
- 自定义幻灯片应用程序的问题
- 什么'我的JavaScript幻灯片有问题
- 使用 W3 的多个幻灯片放映出现问题..CSS
- 幻灯片JS高度和按钮定位问题
- 我的图像幻灯片代码有什么问题
- 调整图像大小以使其完美地适合幻灯片,问题仍然是用 for 循环将 CSS 代码替换为我的图像
- 在单个页面上使用多个JavaScript幻灯片时遇到问题
- 引导轮播分页/幻灯片编号问题
- 幻灯片自动高度问题
- 幻灯片向上/向下滑动 JS 的问题
- Chrome中的超级幻灯片CSS问题 - 需要CSS大师
- JQuery UI“幻灯片”过渡问题与CSS“转换
- HTML5 画布照片幻灯片放映问题
- 我的代码有什么问题.JavaScript幻灯片
- 我的网站上的图像滑块出现幻灯片问题
- Javascript图像幻灯片问题
- jQuery如果然后幻灯片问题
- Javascript幻灯片问题.正在获取空白屏幕