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 = "#777";
     ctx.fillText("Happy Easter", cx, 60);
     ctx.fillText("2023", cx, 100);
     heartsAnimation();
     var c = (bez.dest_y - bez._y);
     var a = c * spring;
     bez.speed += a;
     bez._y += bez.speed;
     var d = (bez1.dest_y - bez1.y);
     var b = d * spring;
     bez1.speed += b;
     bez1.y += bez1.speed;
     ctx.fillStyle = "hsl(31,40%,25%)";
     drawBranch(bez, bez1);
     drawTwig(pointOnQuadraticBezier(bez1, 0.3), 30, 20, 30, 60);
     drawTwig(pointOnQuadraticBezier(bez1, 0.3), 15, 10, 20, 80);
     drawTwig(pointOnQuadraticBezier(bez1, 0.6), 20, 10, 20, 30);
     drawTwig(pointOnQuadraticBezier(bez, 0.9), 10, -20, 20, -30);
     drawTwig(pointOnQuadraticBezier(bez, 0.9), 5, -10, 20, -70);
     DrawBird(50, 0.26, 180, 50);
     DrawBird(60, 0.52, 0, 50);
     DrawBird(55, 0.8, 42, 95)
 }
 elId = window.requestAnimationFrame(Animacion);

 function Bird(c, b, a) {
     this.R = c;
     this.x = b.x;
     this.y = b.y - this.R;
     this.color = a
 }

 function DrawBird(h, i, c, f) {
     var b = "hsl(" + c + "," + f + "%,70%)";
     var l = ["hsl(" + c + "," + f + "%,60%)", "hsl(" + c + "," + f + "%,50%)"];
     ctx.strokeStyle = "hsl(31,40%,25%)";
     var g = pointOnQuadraticBezier(bez, i);
     var a = new Bird(h, g, b);
     ctx.fillStyle = "hsl(" + c + "," + f + "%,50%)";
     ctx.beginPath();
     ctx.moveTo(a.x, a.y + 0.5 * a.R);
     ctx.lineTo(a.x - 1.1 * a.R, a.y + 0.3 * a.R);
     ctx.lineTo(a.x - 1.2 * a.R, a.y + 0.7 * a.R);
     ctx.closePath();
     ctx.fill();
     ctx.fillStyle = a.color;
     ctx.beginPath();
     ctx.arc(a.x, a.y, a.R, 0, 2 * Math.PI);
     ctx.fill();
     var m = a.x + 21 * Math.cos(-165 * rad);
     var n = a.x + 21 * Math.cos(-15 * rad);
     var o = a.y + 21 * Math.sin(-165 * rad);
     var p = a.y + 21 * Math.sin(-15 * rad);
     ctx.fillStyle = "white";
     ctx.beginPath();
     ctx.arc(m, o, 20, 0, 2 * Math.PI);
     ctx.fill();
     ctx.stroke();
     ctx.beginPath();
     ctx.arc(n, p, 20, 0, 2 * Math.PI);
     ctx.fill();
     ctx.stroke();
     ctx.fillStyle = "black";
     ctx.beginPath();
     ctx.arc(m + 5, o + 5, 10, 0, 2 * Math.PI);
     ctx.fill();
     ctx.stroke();
     ctx.beginPath();
     ctx.arc(n - 5, p + 5, 10, 0, 2 * Math.PI);
     ctx.fill();
     ctx.stroke();
     ctx.fillStyle = "darkorange";
     ctx.beginPath();
     ctx.moveTo(a.x, a.y);
     ctx.lineTo(a.x + 7, a.y + 10);
     ctx.lineTo(a.x, a.y + 20);
     ctx.lineTo(a.x - 7, a.y + 10);
     ctx.closePath();
     ctx.fi.........完整代码请登录后点击上方下载按钮下载查看