html+js+canvas实现雪花效果背景

教程管理员发布于2023-09-30 22:34 HTML教程 162

简介： 话不多说先看图：

话不多说先看图：

代码copy过去直接看效果：

<!DOCTYPE html>
<html lang="en" style="margin: 0;padding: 0;width: 100%;height: 100%;">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body style="margin: 0;padding: 0;width: 100%;height: 100%;">
  <canvas id="cvs" style="background-color: black;display: block"></canvas>
</body>
<script>
  let cvs = document.getElementById("cvs");
  let context = cvs.getContext("2d");
  let {clientWidth: width, clientHeight: height} = document.documentElement
  cvs.width=width
  cvs.height=height
  context.fillStyle="#ffffff"
  const bgColors=Array.from(new Array(400)).map(v=>{
    return {
      x:Math.random()*width,
      y:Math.random()*height,
      speed:Math.random()*2.5,
      w:2*Math.random()+1,
      h:2*Math.random()+1
    }
  })
  const render=()=>{
    context.clearRect(0,0,width,height)
    bgColors.forEach(v=>{
      v.y=v.y>height?0:v.y+v.speed
      // context.fillText('*',v.x,v.y,200);
      context.fillRect(v.x,v.y,v.w,v.w)
    })
    requestAnimationFrame(render)
  }
  render()
</script>

</html>

标签：#阿里 #开发者 #雪花 #背景 #效果 #社区

上一篇：html,body高度100%的作用
下一篇：学习HTML DOM笔记

html+js+canvas实现雪花效果背景

相关推荐

会员中心

下载中心

图片素材

关注微信

关于我们

QQ在线客服

关注微信领优惠