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. Composite（组合）

    意图: 将对象组合成树形结构以表示“部分-整体”的层次结构.C o m p o s i t e 使得用户对单个对象和组合对象的使用具有一致性. 适用性: 你想表示对象的部分-整体层次结构. 你希望用户 ...

  2. 3个方法实现JavaScript判断移动端及pc端访问不同的网站

    3个方法比较简单,分别在页面头部加入如下js代码: 对于简单地直接从www.maslinkcom跳转到m.maslink.com,此方法仅从首页而言: <script>(function ...

  3. js 文件系统API操作示例

    最近有个需求是:自动抓取某网站登录页面的验证码图片并保存,抓取n次.使用chrome插件来实现,其中使用到了js操作文件系统的api,特将代码记录下来,以备查阅. PS:第一次使用js文件系统的api ...

  4. IOS-网络（ASIHTTPRequest的使用简介）

    使用iOS SDK中的HTTP网络请求API,相当的复杂,调用很繁琐,ASIHTTPRequest就是一个对CFNetwork API进行了封装,并且使用起来非常简单的一套API,用Objective ...

  5. java并发编程：线程安全管理类--原子操作类--AtomicLong

    可以用原子方式更新的 long 值.有关原子变量属性的描述,请参阅 java.util.concurrent.atomic 包规范.AtomicLong 可用在应用程序中(如以原子方式增加的序列号), ...

  6. Java LRU的实现

    最近在leetcode上做题的时,看到了一道有关LRU Cache的题目,正好我当初面试阿里巴巴的时候问到的.主要采用linkedHashMap来实现. package edu.test.algori ...

  7. Sonar在ant工程中读取单元测试和覆盖率报告

    虽然sonar支持ant工程的构建,但目前最大的不足是无法在分析过程中产生单元测试和覆盖率报告,这样在sonar面板上覆盖率板块就始终没有数据.但幸运的是,sonar可以读取已经生成好的报告,让报告的 ...

  8. Jacoco的原理

    覆盖率计数器 Jacoco使用一系列的不同的计数器来做覆盖率的度量计算.所有这些计数器都是从java的class文件中获取信息,这些class文件可以(可选)包含调试的信息在里面.即使在没有源码的情况 ...

  9. 201621123006 《Java程序设计》第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. InputStream的子类: OutputStream的子类: Reader的子类: Writer的子类: ...

  10. LARC Caffe笔记（一） Setup

    采用杂记的形式 从查找到知乎页面开始:https://www.zhihu.com/question/27982282 到mnist example页面:http://caffe.berkeleyvis ...