为什么会显示危险网站,专业的集团网站设计公司,wordpress 照片插件,做公司网站的专业公司深圳原标题#xff1a;好程序员Java教程分享使用JS实现简单喷泉效果好程序员Java教程分享使用JS实现简单喷泉效果#xff0c;最近#xff0c;在教学生使用JS的基本操作#xff0c;为了练习JS的基本作用#xff0c;特地写了一个喷泉效果#xff0c;代码如下#xff1a;页面代…原标题好程序员Java教程分享使用JS实现简单喷泉效果好程序员Java教程分享使用JS实现简单喷泉效果最近在教学生使用JS的基本操作为了练习JS的基本作用特地写了一个喷泉效果代码如下页面代码: srcjs/particle.js typetext/java charsetutf-8body{margin: 0px;}Particle.js代码如下window. function(){// 创建一个画布对象var canvas document.(canvas);// 设置大小和颜色canvas.width window.innerWidth;canvas.height window.innerHeight;canvas.style.backgroundColor #333333;// 将画布放置到body里document.body.(canvas);// 得到画笔var context canvas.getContext(2d);// 定义一个存放所有粒子的数组var particles [ ];// 调用显示粒子showParticle();// 创建并显示粒子的方法function showParticle(){// 循环操作setInterval(function(){// 清空画布context.clearRect(0,0,canvas.width, canvas.height);// 创建粒子var p new Particle(canvas.width * 0.5, canvas.height * 0.5);// 将粒子装入存放粒子的数组particles.push(p);// 循环更新所有粒子的位置for (var i 0;i// 更新位置particles[i].updateData();}}, 50);}function Particle(x, y){// 原坐标this.x x;this.y y;// 初始出现的改变的y的值this.yVal -5;// 改变的x的值this.xVal Math.random() * 8 - 4;// 定义一个下降的重力加速度this.g 0.1;// 更新位置this.updateData function(){// X值的变化this.x this.x this.xVal;// Y值的变化this.y this.y this.yVal;// 每次改变Y值速度的变化this.yVal this.yVal this.g;// 生成一个随机颜色context.fillStyle # Math.floor(Math.random() * 0xffffff).toString(16);// 将更新位置后的圆绘制出来this.draw();};// 绘图的方法this.draw function(){// 开始画图context.beginPath();// 画圆context.arc(this.x, this.y,5,0,Math.PI * 2, false);// 结束画图context.closePath();// 填充context.fill();};}责任编辑
