小白也會 HTML 動態愛心-詳細教程( 二 )

< amount; i++) {var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());var dir = pos.clone().length(settings.particles.velocity);particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);}// update and draw particlesparticles.update(deltaTime);particles.draw(context, image);}// handle (re-)sizing of the canvasfunction onResize() {canvas.width= canvas.clientWidth;canvas.height = canvas.clientHeight;}window.onresize = onResize;// delay rendering bootstrapsetTimeout(function() {onResize();render();}, 10);})(document.getElementById('pinkboard'));</script> </BODY></HTML>詳細步驟1. 在桌面新建一個txt文件

小白也會 HTML 動態愛心-詳細教程

文章插圖
2. 雙擊打開,并將以上代碼粘貼到文件中
小白也會 HTML 動態愛心-詳細教程

文章插圖
3. 關閉文本文檔并點擊保存
小白也會 HTML 動態愛心-詳細教程

文章插圖
4. 修改文件名后綴為'.html'
小白也會 HTML 動態愛心-詳細教程

文章插圖
如果沒有文件后綴名的小伙伴可以參照下面這張圖的操作打開文件擴展名
小白也會 HTML 動態愛心-詳細教程

文章插圖
5. 在彈窗中點擊"是"
小白也會 HTML 動態愛心-詳細教程

文章插圖
5. 之后會發現圖標變成網頁文件,雙擊打開即可
小白也會 HTML 動態愛心-詳細教程

文章插圖
【小白也會 HTML 動態愛心-詳細教程】

推薦閱讀