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. JNI.ZC_文件(.so/.h)位置

    1.我在做 Android 操作串口的时候,使用的是 "android-serialport-api-master.zip",它所带的 .so文件 的位置是 "??\an ...

  2. 探索解析微服务下的RabbitMQ

    概览 本文主要介绍如何使用RabbitMQ消息代理来实现分布式系统之间的通信,从而促进微服务的松耦合. RabbitMQ,也被称为开源消息代理,它支持多种消息协议,并且可以部署在分布式系统上.它轻量级 ...

  3. Linux命令详解-info

    info是一种文档格式,也是阅读此格式文档的阅读器:我们常用它来查看Linux命令的info文档.它以主题的形式把几个命令组织在一起,以便于我们阅读:在主题内以node(节点)的形式把本主题的几个命令 ...

  4. HDU 2860 (模拟+并查集)

    Regroup Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Sub ...

  5. Intellij Idea 将java项目打包成jar

    1.菜单:File->project stucture 2.在弹窗最左侧选中Artifacts->"+",选jar,选择from modules with depend ...

  6. 解决IE6中img标签 图片透明

    <!--[if IE 6]> <script type="text/javascript"> function correctPNG() { for (va ...

  7. VM虚拟机安装的XP如何全屏

    首先安装install VMwear Tools..,如图:

  8. 008——php字符串中的处理函数（七）

    <?php /** *字符串处理函数(六)get_magic_quotes_runtime set_magic_quotes_runtime strip_tags *get_magic_quot ...

  9. UVA 11624 Fire! bfs 难度:0

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  10. iis6手工创建网站后无法运行php脚本

    给人搬了十几个网站,老站用西部数码建站助手创建的,现在过期了无法继续创建,只能在Internet 信息服务(IIS)管理器创建网站,创建下来都没问题,但是就是无法打开网站. 测试打开txt文档.静态页 ...