用canvas 实现《Matrix》(黑客帝国)中电脑屏幕效果

来源：互联网发布：淘宝粉星便利店靠谱么编辑：程序博客网时间：2024/05/01 19:16

这是我第一次在博客上写文章了。其实我是一名少数民族--维吾尔族，名字名字很长，Abduwahid,平时大家叫我阿卜杜。最近我在一个培训机构学web前端，当我接触到canvas的时候无比的兴奋，可以用代码画图，HTML5真TMD越来越强悍了。我做了一个模拟冒气泡的动态图时，突发灵感，就做了那个《黑客帝国》中的电脑屏幕中一条条绿线。也就是如下图：

打开页面后可以动态的生成，并不断的上升；

源代码：

<!DOCTYPE><html><head><title> 气泡 </title><meta charset="utf-8" /></head><body><canvas id="canvas" width="800px" height="800px" style="background:#000;"></canvas><script>var canvas=document.getElementById("canvas");var context=canvas.getContext("2d");const WIDTH=canvas.width=window.innerWidth;const HEIGHT=canvas.height=window.innerHeight;function paint(){context.clearRect(x-r,y+r,2*r,2*r)var x=Math.random()*WIDTH;//从页面底部随机生成气泡var r=Math.random()*10;<span style="font-family: Arial, Helvetica, sans-serif;">//从页面底部随机生成半径为r的小圆</span>var y=HEIGHT;//初始化y的值为canvas的高度setInterval(function(){//设个定时器context.beginPath();context.arc(x,y,r,0,Math.PI*2);//画圆context.closePath();context.fill();context.fillStyle="rgba(0,255,0,"+(Math.random()*0.5)+")";y-=r;},30);}window.onload=function(){setInterval(paint,30);}</script></body></html>

这个效果完成之后，我就实现了另一个效果，在一个优美的风景图上配上气泡，效果如下：

这个的源代码：

<!DOCTYPE><html><head><title> 气泡 </title><meta charset="utf-8" /></head><body><canvas id="canvas" width="1024px" height="724px" style="background-image:url('beautiful.jpg');"></canvas><script>var canvas=document.getElementById("canvas");var context=canvas.getContext("2d");const WIDTH=canvas.width;const HEIGHT=canvas.height;function paint(){context.clearRect(0,0,WIDTH,HEIGHT)var x=Math.random()*WIDTH;var r=Math.random()*20;var y=HEIGHT;var timer=setInterval(function(){context.beginPath();context.arc(x,y,r,0,Math.PI*2);context.closePath();context.fill();context.fillStyle="rgba(255,255,255,"+(y-4*r)/HEIGHT*0.6+")";y-=10;(y-5*r)<0&&(clearInterval(timer))if (y<0){clearInterval(timer);y=HEIGHT;}},100);}window.onload=function(){setInterval(paint,100);}</script></body></html>

0 0

用canvas 实现《Matrix》(黑客帝国)中 电脑屏幕效果

这个效果完成之后，我就实现了另一个效果，在一个优美的风景图上配上气泡，效果如下：

用canvas 实现《Matrix》(黑客帝国)中电脑屏幕效果