怎样制作出这样网页效果呢？

清美线上毕业展

施齐邦 发表于 2021-11-3 16:44
以下代码复制到txt里，然后改成

按按照图片上的代码放置，用txt文档编写以上代码，然后把.txt改成.html文件，再用浏览器打开就能看到你想要的效果

补充内容 (2021-11-3 16:54):
后续的跳转功能就是把alert函数换成你跳转函数。（ps:当然整个网站你也可以用直接用js写也可以，不用canvas也行）

我也想知道

SURF-
其实没有get到你的点，你是说
1,如何设计出他这样的作品，或者说他作品应用的原理是怎样2,还是说如何设计出作为进入这个的界面。其他界面的切换是怎样配合的？

Dus 发表于 2021-11-2 21:14
SURF-
其实没有get到你的点，你是说
1,如何设计出他这样的作品，或者说他作品应用的原理是怎样2,还是说如何 ...

赞同

Dus 发表于 2021-11-2 21:14
SURF-
其实没有get到你的点，你是说
1,如何设计出他这样的作品，或者说他作品应用的原理是怎样2,还是说如何 ...

你所提到的第二点就是网页效果，即进入页面的效果动画和切换

以下代码复制到txt里，然后改成

1. 
   
2.     <canvas id="myCanvas" height="100" style="border:1px solid #000000;">
   
3.     </canvas>
   
4.     let w=document.documentElement.clientWidth;
   
5.      let h=document.documentElement.clientHeight;
   
6.     document.getElementById('myCanvas').style.height = w + 'px'
   
7.     document.getElementById('myCanvas').style.width = h + 'px'
   
8.     window.onresize = function(e) {
   
9.      w=document.documentElement.clientWidth;
   
10.      h=document.documentElement.clientHeight;
    
11.     document.getElementById('myCanvas').style.height = w + 'px'
    
12.     document.getElementById('myCanvas').style.width = h + 'px'
    
13.     }
    
14.     let c = document.getElementById("myCanvas");
    
15.     let ctx = c.getContext("2d");
    
16.     ctx.font = "20px Arial";
    
17.     let n = 0;
    
18.     let timer = setInterval(function() {
    
19.         ctx.clearRect(0, 0, w, h); //清空所有的内容
    
20.         n++
    
21.         if (n == 100) {
    
22.                 alert('ok了')
    
23.             clearInterval(timer)
    
24.         }
    
25. 
    
26.         ctx.strokeText("Hello World" + n, 10, 50);
    
27.     }, 100)
    

复制代码

整个网站开机动画是用canvas写的，然后加了视频播放，最后播放完成后隐藏视频再显示主题内容

补充内容 (2021-11-3 16:59):
好吧，刚看了整个网站，整片网站内容展示也是cavans做的。。。。

施齐邦 发表于 2021-11-3 16:57
整个网站开机动画是用canvas写的，然后加了视频播放，最后播放完成后隐藏视频再显示主题内容

补充内容 (20 ...

SURF-
点赞，为阁下快速又仔细的回复

施齐邦 发表于 2021-11-2 20:25
按按照图片上的代码放置，用txt文档编写以上代码，然后把.txt改成.html文件，再用浏览器打开就能看到你 ...

十分感谢！