index.html:
1 <!DOCTYPE html>
2 <html lang = "zh-cn">
3
4 <head>
5 <title>testCanvas</title>
6 <meta charset = "utf-8" />
7 <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
8 <style>
9 *{
10 margin:0;
11 padding: 0;
12 }
13 body{
14 overflow: hidden;
15 }
16 </style>
17 </head>
18
19 <body>
20
21 <script src = "./js/main.js" type = "module"></script>
22
23 </body>
24
25 </html>
main.js:
1 import { ElementUtils, CanvasImageDraw, CanvasImageScroll, CanvasImage } from "./ElementUtils.js";
2
3 /* 测试 CanvasImageScroll 的参数 option.isPage 画布的滚动条变异成拖拽翻页效果(注意桌面端无效):
4 下载地址(无提取码, 2023.2.17 更新): https://www.123pan.com/s/ylTuVv-oIhpH
5 */
6 function main(){
7
8 const urls = ["./img/31.jpg", "./img/49.jpg", "./img/52.jpg"],
9
10 cid = new CanvasImageDraw({width: 300, height: 300, alpha: true}),
11
12 cis = new CanvasImageScroll(cid, {scrollVisible: "auto", scrollSize: 4, isPage: true});
13
14 ElementUtils.createCanvasFromURL(cid.box.w, cid.box.h, urls, true, imgs => {
15
16 //创建 CanvasImage 并将其位置设置为从左往右平铺
17 for(let i = 0; i < imgs.length; i++) cid.list[i] = new CanvasImage(imgs[i]).pos(i * imgs[i].width, 0);
18
19 //cis 能够监听 CanvasImage
20 cis.bindScrolls();
21
22 //绘制一次画布并把画布加入到DOM树
23 cid.domElement.style = `
24 background: #000000;
25 position: absolute;
26 left: ${(innerWidth - cid.box.w) / 2}px;
27 top: ${(innerHeight - cid.box.h) / 2}px;
28 `;
29 cid.render();
30
31 });
32
33 }
34
35 main();
标签：box,画布,option,翻页,cid,isPage,滚动条,CanvasImage,CanvasImageScroll From： https://www.cnblogs.com/weihexinCode/p/17130903.html