使用JS實現簡單噴泉效果

2021-09-24 23:27:32 字數 967 閱讀 2537

最近,在教學生使用js的基本操作,為了練習js的基本作用,特地寫了乙個噴泉效果,**如下:

頁面**:

particle.js**如下:

window.onload = function(), 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();

js實現簡單瀑布流效果

1.瀑布流,雖然是一種經典的前端效果,但經常不用都忘了它的寫法。前些天需要時,一直忙著找外掛程式,但外掛程式並不是很友好,免費的達不到效果,花金幣又感覺很不值。有時間還不如自己來,又是自己就隨意寫了乙個,還好能勉強過關。var left top left div div last child off...

原生js實現簡單動畫效果

實現動畫效果可以用jquery提供的animate方法,或一些外掛程式來實現,但是隨著前端元件化開發的流行,jquery大量的dom操作已經顯得十分多餘,正在逐漸從前端技術棧中被淘汰,下面我們使用原生js實現簡單的勻速動畫效果和緩動效果 勻速動畫實現水平移動 css樣式 box line400 li...

使用js實現時鐘效果

首先在單元格中輸入下面的 然後使用html顯示內容。這個寬高可以根據自己需要填。然後在預覽方式中新增載入結束事件 var dom document.getelementbyid view var ctx dom.getcontext 2d var width ctx.canvas.width var...