canvas实现可爱卡通小鸟枝头动画效果代码-html代码-BFW代码库

canvas实现可爱卡通小鸟枝头动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现可爱卡通小鸟枝头动画效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
@import url(https://fonts.googleapis.com/css?family=Tangerine);body{margin:0;background:#eee;font-family:Courier,monospace;font-size:14px}canvas{display:block;margin:0 auto;margin:calc(50vh - 250px) auto}
</style>
</head>

<body><canvas id="c"></canvas>
    <script>
       var canvas = document.getElementById("c");
 var ctx = canvas.getContext("2d");
 var cw = canvas.width = 500,
     cx = cw / 2;
 var ch = canvas.height = 500,
     cy = 3 * ch / 4;
 var rad = Math.PI / 180;
 var frames = 0;
 var spring = 0.005;
 var leafColors = ["#5a9435", "#76ae3e"];
 var heartsRy = [];
 ctx.font = "35pt Tangerine";
 ctx.strokeStyle = "hsl(19,98%,45%)";
 ctx.textAlign = "center";
 var bez = {
     x: 0,
     y: cy,
     cx: cx,
     cy: cy,
     _x: cw - 50,
     _y: cy,
     dest_y: cy + 20,
     speed: 0
 };
 var bez1 = {
     _x: 0,
     _y: cy + 20,
     cx: cx,
     cy: cy + 15,
     x: cw - 50,
     y: cy + 10,
     dest_y: cy + 30,
     speed: 0
 };

 function Animacion() {
     elId = window.requestAnimationFrame(Animacion);
     frames++;
     ctx.clearRect(0, 0, cw, ch);
     ctx.fillStyle = ".........完整代码请登录后点击上方下载按钮下载查看