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. 最近公共祖先问题 LCA

    2018-03-10 18:04:55 在图论和计算机科学中,最近公共祖先,LCA(Lowest Common Ancestor)是指在一个树或者有向无环图中同时拥有v和w作为后代的最深的节点. 计算 ...

  2. Undertow,Tomcat和Jetty服务器配置详解与性能测试

    undertow,jetty和tomcat可以说是javaweb项目当下最火的三款服务器,tomcat是apache下的一款重量级的服务器,不用多说历史悠久,经得起实践的考验.然而:当下微服务兴起,s ...

  3. 微信小程序纯css制作圆形进度条所遇到的问题

    wrapBox:最外层盒子,背景色为进度条的颜色 leftBox/rightBox:半宽等长 左/右浮动的盒子,背景色为灰色 roundMask:居中的盒子 用来遮盖leftBox和rightBox ...

  4. bzoj 1854 构图 并查集

    我们可以把一件装备看成一条边,两个属性看成两个点,那么这就相当于读入了一张图 当读入每一个x,y时,我们找到两个点的祖先节点,fx,fy,我们保证祖先节点在该连通块 中编号(装备属性)最大,用flag ...

  5. 简述 AJAX 及基本步骤

    简述 AJAX:AJAX即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术.通过在后台与服务器进行 ...

  6. 快速切题 sgu135. Drawing Lines

    135. Drawing Lines time limit per test: 0.25 sec. memory limit per test: 4096 KB Little Johnny likes ...

  7. test20181020 B君的第二题

    题意 分析 考场70分 一看就是裸的kmp,直接打上去. #include<cstdlib> #include<cstdio> #include<cmath> #i ...

  8. 初识安卓小程序(Android短信发送器)

    首先,先创建一个安卓项目(我的版本号是4.4.2的),名字为"短信发送器" 然后在res目录下找到layout目录,找到activity_main.xml或fragment_mai ...

  9. DBUnit使用介绍

    一.DbUnit设计理念熟悉单元测试的开发人员都知道,在对数据库进行单元测试时候,通常采用的方案有运用模拟对象(mock objects)和stubs两种.通过隔离关联的数据库访问类,比如JDBC的相 ...

  10. mysql中distinct

    1.Distinct 位置 单独的distinct只能放在开头,否则报错,语法错误,与其他函数使用时候,没有位置限制如下 Select player_id,count(distinct(task_id ...