<>强效果如下:
<强>代码如下:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Canvas
& lt;风格类型=" text/css "比;
* {
保证金:0;
填充:0;
}
html,身体{
高度:100%;
}
# myCanvas {
background - color: # 87 ceeb;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt;帆布id=癿yCanvas”宽度==?00”“1000”高度的在您的浏览器不支持帆布元素& lt;/canvas>
& lt;脚本type=" text/javascript祝辞
画布var=. getelementbyid (“myCanvas”);
var=canvas.getContext上下文(2 d);
var切实可行=[];
(var=0;我& lt;500;我+ +){//循环生成500粒
practicles.push ({
x: math . random () * (window.innerWidth),
y: math . random () * (window.innerHeight),
vx: math . random (-0.5),
+ 0.5 v: math . random (),
大小:math . random () * 3 + 1,
颜色:# FFF“
})
}
函数timeUpdate () {
context.clearRect (0, 0, window.innerWidth window.innerHeight);//清除画布区域
var切实可行;
(var=0;我& lt;500;我+ +){
var切实可行=可行[我];
切实可行。x +=可行[我].vx;
切实可行。y +=可行[我].vy;
如果(practicle.x<0) {practicle.x=window.innerWidth}
如果(practicle.x> window.innerWidth) {practicle.x=0}
如果(practicle.y> window.innerHeight) {practicle.y=0}
上下文。开始路径（）：
context.arc (practicle.x practicle.y practicle.size 0, Math.PI * 2)
context.closePath ();
上下文。fillStyle=practicle.color;
上下文。填充（）：
}
}
setInterval (timeUpdate 40);
& lt;/script>
& lt;/body>
& lt;/html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
