利用canvas画布制作简易轮播图
我们先来看看效果：
步骤解析
1.创建一个画布，并给它定义宽高，然后设置样式。
css样式
<style>
*{
padding: 0;
margin: 0;
}
canvas{
border: 1px red solid;
display: block;
margin: 20px auto;
}
</style>
body标签
<body>
<canvas width="1500" height="333"></canvas>
<!-- <img src="./img/11.jpg" alt=""> -->
</body>
注意：这里我们要将画布高度设置为图片的高度，宽度为图片的倍数，这里每张图片高333px,宽500px，我们设置的画布宽度为1500px。
2.获取画布元素，并引入图片路径
var canvas=document.getElementsByTagName("canvas")[0];
var context=canvas.getContext("2d");
//用来装图片路径的数组，
//注意后面重复的图片宽度相加要刚好与画布（1500px）的宽度相等
var imgs=["./img/11.jpg","./img/12.jpg","./img/13.jpg","./img/14.jpg","./img/15.jpg"<
最低0.47元/天 解锁文章
197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
