canvas高级动画示例

演示地址 https://qzruncode.github.io/example/index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style type="text/css">

        canvas {

            border: 1px solid black;

        }

    </style>

</head>

<body>

    <canvas id="canvas" width="500px" height="500px"></canvas>

    <script>

        const canvas = document.getElementById('canvas');

        const ctx = canvas.getContext('2d');

        var cRect = canvas.getBoundingClientRect();

        var raf;

        var running = false;

        var ball = {

            x: 100,

            y: 100,

            vx: 5,

            vy: 2,

            radius: 25,

            color: 'red',

            draw: function () {

                ctx.beginPath();

                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);

                ctx.closePath();

                ctx.fillStyle = this.color;

                ctx.fill();

            }

        };

        function clear() {

            // ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 尾影效果使用下面

            ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';

            ctx.fillRect(0, 0, canvas.width, canvas.height);

        }

        function draw() {

            clear();

            ball.draw();

            // 移动

            ball.x += ball.vx;

            ball.y += ball.vy;

            // 曲线运动

            ball.vy *= .99;

            ball.vy += .25;

            // 边界

            if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {

                ball.vy = -ball.vy;

            }

            if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {

                ball.vx = -ball.vx;

            }

            raf = window.requestAnimationFrame(draw);

        }

        canvas.addEventListener('mousemove', function (e) {

            if (!running) {

                clear();

                ball.x = Math.round(e.clientX - cRect.left);

                ball.y = Math.round(e.clientY - cRect.top);

                ball.draw();   // 直接调用draw只会绘制一帧

            }

        });

        canvas.addEventListener('click', function (e) {

            if (!running) {

                raf = window.requestAnimationFrame(draw);

                running = true;

            }

        });

        canvas.addEventListener('mouseout', function (e) {

            window.cancelAnimationFrame(raf);

            running = false;

        });

        ball.draw();

    </script>

</body>

</html>

canvas高级动画示例的更多相关文章

  1. canvas基础动画示例

    canvas基础动画示例 本文主要用最简单的例子,展示canvas动画效果是如何实现的 动画效果,是一个球绕着一点旋转 const canvas = document.getElementById(' ...

  2. html5 canvas高级贝塞尔曲线运动动画(好吧这一篇被批的体无完肤！都说看不懂了！没办法加注释了！当然数学不好的我也没办法了，当然这还涉及到一门叫做计算机图形学的学科)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. “AS3.0高级动画编程”学习：第一章高级碰撞检测

    AdvancED ActionScript 3.0 Animation 是Keith Peters大师继"Make Things Move"之后的又一力作,网上已经有中文翻译版本了 ...

  4. “AS3.0高级动画编程”学习：第二章转向行为(上)

    因为这一章的内容基本上都是涉及向量的,先来一个2D向量类:Vector2D.as (再次强烈建议不熟悉向量运算的童鞋,先回去恶补一下高等数学-07章空间解释几何与向量代数.pdf) 原作者:菩提树下的 ...

  5. canvas小球动画

    绘制小球 我们将会画一个小球用于动画学习,所以首先在画布上画一个球.下面的代码帮助我们建立画布. <canvas id="></canvas> 跟平常一样,我们需要先 ...

  6. 使用Canvas实现动画效果 | DKlogs -- 设计 | 生活

    使用Canvas实现动画效果 | DKlogs -- 设计 | 生活 使用Canvas实现动画效果

  7. “AS3.0高级动画编程”学习：第二章转向行为(下)

    在上一篇里,我们学习了“自主角色”的一些基本行为:寻找(seek).避开(flee).到达(arrive).追捕(pursue).躲避(evade).漫游(wander).这一篇将继续学习其它更复杂, ...

  8. XamarinAndroid组件教程RecylerView适配器设置动画示例

    XamarinAndroid组件教程RecylerView适配器设置动画示例 [示例1-3]下面将在RecylerView的子元素进行滚动时,使用适配器动画.具体的操作步骤如下: (1)创建一个名为R ...

  9. Swift - transform.m34动画示例

    Swift - transform.m34动画示例 效果 源码 https://github.com/YouXianMing/Swift-Animations // // CATransform3DM ...

随机推荐

  1. rxjava rxandroid使用遇到的坑

    今天在解决一个界面加载本地数据库数据的时候,使用rxjava在指定io线程操作是遇到一个问题,即使指定了在io线程操作,可是界面还是卡顿,最后通过打印线程Thread.currentThread(). ...

  2. 最好的移动触摸滑动插件：Swiper

    最近在使用的一个移动触摸滑动插件Swiper,功能很强大,跟之前的那个swipe.JS相比,同时支持在PC端滑动,支持上下方向滑动,支持多张图片滑动,支持多屏滑动,凡是你想得到的几乎都可以实现.最近作 ...

  3. ArrayList相关问题

    设定初始化容量new一个list List<String> list = new ArrayList<>(10); list.add("s"); 进入构造方 ...

  4. 【C#笔札】Tryparse的用法

    这是参考读物的上得一个例子.自己仿照做的作业 private void button1_Click(object sender, EventArgs e) { int P_int_Number,i; ...

  5. vscode的keybindings.json 和 AHK 脚本映射Win键

    vscodehotkey.ahk https://github.com/m2nlight/AHKVSCodeLikeMac ; Shortcuts like mac ; Written by Bob ...

  6. HDU 4004 二分

    The Frog's Games Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65768/65768 K (Java/Others) ...

  7. vue 点击按钮 input框架获取焦点的方法

    在按钮事件里加上这一段this.$nextTick(() =>{ this.$refs.input.focus()})

  8. IOS-高仿bilibili项目

    高仿bilibili项目成长之路 (logo) 高仿bilibili项目 Github链接:(https://github.com/MichaelHuyp/Bilibili_Wuxianda) 目前完 ...

  9. Alpha冲刺一 （10/10）

    前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/10034872.html 作业博客:https://edu.cnblogs.com/campus ...

  10. html5实现本页面元素拖放和本地文件拖放

    HTML5拖放 拖放本地数据   1.HTML拖放 拖放(Drag 和 Drop)是HTML5标准的组成部分 2.拖放开始: ondragStart:调用了一个函数,drag(event),它规定了被 ...