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. redis优缺点

    redis主要是一个内存数据库.很多时候是被作为缓存来使用.redis的优势主要体现在和其他缓存方案进行比较,redis的不足主要是和其他数据库进行比较时体现的. 优点: 读写性能优异 支持数据持久化 ...

  2. linux 前端部署

    linux.conf user root; worker_processes ; #error_log logs/error.log; #error_log logs/error.log notice ...

  3. JVM虚拟机调优指南

    本章通过阅读JVM垃圾搜集指南文档,整理虚拟机主要配置以及,理解不同的垃圾搜集器. 垃圾搜集算法 引用计数算法 根搜索算法 标记-清除算法 复制算法 标记-整理算法 分代收集算法 搜集算法网上有很多介 ...

  4. Android 之低版本高版本实现沉浸式状态栏

    沉浸式状态栏确切的说应该叫做透明状态栏.一般情况下,状态栏的底色都为黑色,而沉浸式状态栏则是把状态栏设置为透明或者半透明. 沉浸式状态栏是从android Kitkat(Android 4.4)开始出 ...

  5. 剑指 offer面试题22 栈的压入和弹出序列

    题目描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压栈序 ...

  6. UVALive-5095 Transportation （最小费用流+拆边）

    题目大意:有n个点,m条单向边.要运k单位货物从1到n,但是每条道路上都有一个参数ai,表示经这条路运送x个单位货物需要花费ai*x*x个单位的钱.求最小费用. 题目分析:拆边.例如:u到v的容量为5 ...

  7. hell 1>&2 2>&1 &>filename重定向的含义和区别

    当初在shell中, 看到">&1"和">&2"始终不明白什么意思.经过在网上的搜索得以解惑.其实这是两种输出. 一.linux重定 ...

  8. Cache应用/任务Mutex，用于高并发任务处理经过多个项目使用

    <?php /** * Class Cache redis 用于报表的缓存基本存储和读写 2.0 * <pre> * Cache::read("diamond.accoun ...

  9. 在ubuntu16上进行nginx+uwsgi+django部署的简要步骤

    网上有很多部署教程,说了一大堆,遇到坑还是要自己一个个解决,这里有几个比较重要的坑大家一定要注意. 1.首先要安装python和python-dev环境,如果没有安装python-dev后面安装有些依 ...

  10. DIY远程移动图像监测(tiny6410+USB摄像头+motion+yeelink+curl)

    看到有博客上采用motion搭建移动图像监测系统,感觉很强大,但大多缺少远程监测能力,大多局限于局域网.OK,笔者手头刚好有一个30W像素的USB摄像头,那么借用yeelink服务,也来DIY一把,哈 ...