canvas实现逼真水世界动画效果代码-html代码-BFW代码库

canvas实现逼真水世界动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现逼真水世界动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
* {
  margin: 0;
  padding: 0;
  border: 0;
  background: #000 
}

canvas {
position: relative; top:50%;
left:50%;
margin-left:-50vmin;
width:100vmin;
height:100vmin;
overflow:hidden;
display: block;
}
</style>


</head>

<body >
  <canvas></canvas>

  
      <script>
var canvas, ctx, tim, bai;
canvas = document.getElementsByTagName('canvas')[0];
ctx = canvas.getContext('2d');
canvas.width = canvas.height = 400;
aaa();

function aaa() {
  var a, b, c, s, p, r, x, y, z, x1, y1, max, p2, han, h, pt, hei;
  ctx.globalCompositeOperation = "source-over";
  ctx.fillStyle = "rgb(0,0,0)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.globalCompositeOperation = "lighter";
  tim = new Date().getTime() / 10;
  ctx.strokeStyle = ctx.fillStyle = "hsla(244,60%,60%,0.3)";

  bai = 0.6 + Math.sin(tim / 471) * 0.2;
  hei = 0.9 + Math.sin(tim / 100) * 0.3;

  pt = [];
  for (c = 0; c < 180; c++) {
    s = (c + 1) / 180;
    han = Math.cos(s * Math.PI / 2);
    h = Math.sin(s * Math.PI / 2);
    s = 1 - s;
    p = [];
    max = 100 .........完整代码请登录后点击上方下载按钮下载查看