canvas实现风车旋转和泡泡漂浮动画效果代码-html代码-BFW代码库

canvas实现风车旋转和泡泡漂浮动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现风车旋转和泡泡漂浮动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        * {
    	font-family:'arial black',Helvetica,verdana,monospace,sans-serif;
    	letter-spacing:.2rem;
    	margin:0;
    	padding:0;
    	color:#FFF;
    	overflow:hidden
    }
    body {
    	position:relative
    }
    canvas#canvas {
    	display:block;
    	background:#ABE7FF
    }
    </style>
</head>

<body>
    <canvas id="canvas">Canvas not supported.</canvas>
    <script>
        (function() {
       window.addEventListener("load", function() {
           var f = document.getElementById("canvas");
           if (!f || !f.getContext) {
               return false
           }

           function o(i, b) {
               return Math.floor(Math.random() * (b - i + 1) + i)
           }
           var g = f.getContext("2d");
           var v = f.width = window.innerWidth;
           var w = f.height = window.innerHeight;
           var k = null;
           var l = null;
           var e = [];
           var d = 150;
           var t = [];
           var n = Math.PI * 2 / 4;
           var u = {
               black: "black",
               white: "white",
               lineWidth: 4,
           };
           if (v < 768) {
               d = 100
           }
           window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(b) {
               setTimeout(b, 17)
           };

           function c(b, i, s) {
               this.ctx = b;
               this.init(i, s)
           }
           c.prototype.init = function(b, i) {
               this.x = b;
               this.y = i;
               this.r = o(20, 50);
               this.ga = Math.random() * Math.random() * Math.random();
               this.v = {
                   x: o(-1, 1) * Math.random() * Math.random(),
                   y: Math.random()
               };
               this.random = Math.random();
               this.a = o(0, 360);
               this.rad = this.a * Math.PI / 180;
               this.as = o(0, 360) * Math.PI / 180
           };
           c.prototype.draw = function() {
               var b = this.ctx;
               b.save();
               b.fillStyle = "white";
               b.strokeStyle = "white";
               b.lineCap = "round";
               b.lineWidth = this.r / 4;
               b.globalAlpha = this.ga;
               b.translate(this.x, this.y);
               b.rotate(this.rad);
               b.translate(-this.x, -this.y);
               b.beginPath();
               b.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
               b.fill();
               b.globalAlpha = this.ga * 1.1;
               b.beginPath();
               b.arc(this.x, this.y, this.r * 0.7, this.as, this.as + 1, false);
               b.stroke();
               b.restore()
           };
           c.prototype.updatePosition = function() {
               if (this.y > w - w / 3) {
                   this.v.x += 0.1;
                   this.v.y -= 0.01
               }
               this.x += this.v.x;
               this.y += this.v.y
           };
           c.prototype.updateParams = function(b) {
               this.a += this.random;
               this.rad = this.a * Math.PI / 180
           };
           c.prototype.wrapPosition = function() {
               if (this.x > v + this.r / 2) {
                   this.init(o(0, v), o(0 - w / 5, 0))
               }
           };
           c.prototype.render = function(b) {
               this.updateParams(b);
               this.updatePosition();
               this.wrapPosition();
               this.draw()
           };
           for (var j = 0; j < d; j++) {
               var a = new c(g, o(0, v), o(0, w / 2));
               e.push(a)
           }

           func.........完整代码请登录后点击上方下载按钮下载查看