我正在尝试在 html5 中创建一个照片 slider ，然后将其放入 Canvas 标签中。到目前为止，我可以看到图像，但无法在它们后面设置 Canvas 。有人可以告诉我发生了什么事吗？提前谢谢你。
HTML:
<html>
<head>
<script type="text/javascript">
var step = 1;
var img = new Array(17);
for(var i = 1; i <= 17; i++){
img[i] = new Image();
img[i].src = "/images/img"+i+".jpg"; //load images
}
</script>
<script type="text/javascript" src="\js\photoSliderController.js"></script>
</head>
<body>
<section id="photoSliderContainer">
<img name="slide" id="photoSliderControls" src="C:\Users\Vassileios\Dropbox\symmetexw\images\img1.jpg" width="500" height="300">
<script type="text/javascript">
slideImages();
</script>
</img>
<canvas id="photoSliderViewport">
Your browser does not support the HTML5 canvas tag.
</canvas>
</section>
</body>
</html>
CSS:
#photoSliderViewPort{
float: right;
margin-top: 3%;
margin-right: 0%;
margin-bottom: 95%;
margin-left: 24%;
width: 800px;
height: 800px;
background:rgba(75,75,186,1);
}
#photoSliderControls{
float: right;
margin-top: 3%;
margin-right: 0%;
margin-bottom: 95%;
margin-left: 24%;
z-index:1;
}
JS:
function slideImages(){
document.images.slide.src = eval("img["+step+"].src");
if(step<17)
step++;
else
step=1;
setTimeout("slideImages()",3000);
}
最佳答案
var canvas = document.getElementById('photoSliderViewport');
var ctx = canvas.getContext('2d');
var step = 0; // Start Array key (0 indexed)
var images = []; // Array of image paths
var nOfImages = 5; // Set here the desired number of images
canvas.width = 800;
canvas.height = 800;
// Populate array with paths;
for(var i=1; i<=nOfImages; i++){
images.push("http://placehold.it/800x800/ccc&text="+i+".jpg");
}
console.log(images);
function slideImages(){
var img = new Image();
img.onload = function(){ // Once it's loaded...
ctx.drawImage(img, 0, 0); // Draw it to canvas
step = ++step % nOfImages ; // Increase and loop step
setTimeout(slideImages, 3000); // Do it again in 3000ms
};
img.src = images[step]; // Finally, set the new image src
}
slideImages(); // START <section id="photoSliderContainer">
<canvas id="photoSliderViewport">
Your browser does not support the HTML5 canvas tag.
</canvas>
</section>关于javascript - 将照片 slider 放入 Canvas 标签内，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25952006/