可视化系列讲解:canvas的动画实现

这篇具有很好参考价值的文章主要介绍了可视化系列讲解:canvas的动画实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


一、Canvas动画

1.1 Canvas绘图都是通过JavaScript 去操控的,如要实现一些交互性动画是相当容易的。那Canvas是如何做一些基本动画的?

◼ canvas可能最大的限制就是图像一旦绘制出来,它就是一直保持那样了。
◼ 如需要执行动画,不得不对画布上所有图形进行一帧一帧的重绘(比如在1秒绘60帧就可绘出流畅的动画了)。
◼ 为了实现动画,我们需要一些可以定时执行重绘的方法。然而在Canvas中有三种方法可以实现:分别为 setInterval 、 setTimeout 和 requestAnimationFrame 三种方法来定期执行指定函数进行重绘。

1.2 Canvas 画出一帧动画的基本步骤(如要画出流畅动画,1s 需绘60帧):

◼ 第一步:用 clearRect 方法清空 canvas ,除非接下来要画的内容会完全充满 canvas(例如背景图),否则你需要清空所有。
◼ 第二步:保存 canvas 状态,如果加了 canvas 状态的设置(样式,变形之类的),又想在每画一帧之时都是原始状态的话,
你需要先保存一下。
◼ 第三步:绘制动画图形(animated shapes) ,即绘制动画中的一帧。
◼ 第四步:恢复 canvas 状态,如果已经保存了 canvas 的状态,可以先恢复它,然后重绘下一帧。

二、Canvas-绘制秒针-setInterval实现

2.1 setTimout定时器的缺陷

setTimeout定时器不是非常精准的,因为setTimeout的回调函数是放到了宏任务中等待执行。
◼ 如果微任务中一直有未处理完成的任务,那么setTimeout的回调函数就有可能不会在指定时间内触发回调
◼ 如果想要更加平稳和更加精准的定时执行某个任务的话,可以使用requestAnimationFrame函数。

可视化系列讲解:canvas的动画实现

<!DOCTYPE html>
<html lang="zh-CH">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      padding: 100px;
      margin: auto;
      background-image: url(../images/grid.png);
    }
    canvas {
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  
  <!-- 如果不给宽高 默认宽300px 高150px -->
  <canvas id="box" width="300" height="300">
    您的浏览器不兼容Canvas,请升级浏览器
  </canvas>

  <script>
    // 这个函数就是动画的一帧
    function draw(ctx, count) {
      // 清空画布
      ctx.clearRect(0, 0, 300, 300)
      ctx.save()
      // 绘图
      ctx.translate(100, 100)
      // Math.PI * 2 圆
      // Math.PI * 2 / 60 把圆分为60份
      ctx.rotate(Math.PI * 2 / 60 * count)
      ctx.lineWidth = 6
      ctx.lineCap = 'round'
      ctx.strokeStyle = 'green'
      ctx.beginPath()
      ctx.moveTo(0, 0)
      ctx.lineTo(0, -80)
      ctx.stroke()
      ctx.restore()
    }
    window.onload = function() {
      const canvasEl = document.getElementById('box')
      if (!canvasEl.getContext) return
      let ctx = canvasEl.getContext('2d')
      let count = 0
      draw(ctx, count)

      setInterval(() => {
        count++
        if (count >= 60) {
          count = 0
        }
        draw(ctx, count)
      }, 1000);
    }
  </script>
</body>
</html>

三、Canvas-绘制秒针–requestAnimationFrame实现

3.1 requestAnimationFrame函数

告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用该函数的回调函数来更新动画。
◼ 该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行
◼ 若想在浏览器下次重绘之前继续更新下一帧动画,那么在回调函数自身内必须再次调用 requestAnimationFrame()
◼ 通常每秒钟回调函数执行 60 次左右,也有可能会被降低。

<!DOCTYPE html>
<html lang="zh-CH">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      padding: 100px;
      margin: auto;
      background-image: url(../images/grid.png);
    }
    canvas {
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  
  <!-- 如果不给宽高 默认宽300px 高150px -->
  <canvas id="box" width="300" height="300">
    您的浏览器不兼容Canvas,请升级浏览器
  </canvas>

  <script>
    // 这个函数就是动画的一帧
    function draw(ctx) {
      let second = new Date().getSeconds()
      ctx.clearRect(0, 0, 300, 300)
      ctx.save()
      ctx.translate(100, 100)
      ctx.rotate(Math.PI * 2 / 60 * second)
      ctx.lineWidth = 6
      ctx.lineCap = 'round'
      ctx.strokeStyle = 'green'
      ctx.beginPath()
      ctx.moveTo(0, 0)
      ctx.lineTo(0, -80)
      ctx.stroke()
      ctx.restore()
    
      requestAnimationFrame(() => {
        draw(ctx)
      })
    }

    window.onload = function() {
      const canvasEl = document.getElementById('box')
      if (!canvasEl.getContext) return
      let ctx = canvasEl.getContext('2d')
      requestAnimationFrame(() => {
        draw(ctx)
      })
    }
  </script>
</body>
</html>

四、其他动画案例

案列地址文章来源地址https://www.toymoban.com/news/detail-400550.html

到了这里,关于可视化系列讲解:canvas的动画实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Revit二次开发知识分享(二十四)实现鼠标可视化跟随动画效果

    背景:群友询问:怎样子实现在批量选择完管道,在点击放置标签时,想有一个可视化跟随的动画效果。然后研究了一番,下面提供了一个简易版的实行方案,大家可以参考学习。 源码 实现如下图所示的选择完管件后,鼠标动画跟随效果 其中Rectangle是当前视图边框投影到屏

    2024年02月10日
    浏览(66)
  • 【无人机】四轴无人机的轨迹进行可视化和动画处理(Matlab代码实现)

     📋📋📋 本文目录如下: ⛳️⛳️⛳️ ​ 目录 1 概述 2 运行结果 3 参考文献 4 Matlab代码实现 随着传感器检测技术、智能控制技术和材料技术的快速发展,四轴无人机及其配套系统的发展越来越成熟。无人机遥感系统具有成本低、易维护、效率高、时效性强及对环境要求低

    2024年02月14日
    浏览(50)
  • A*算法求解迷宫问题(算法讲解与证明、python实现与可视化)

    目录 一、引入 二、具体细节 1、BFS(Breadth First Search) 2、Dijkstra(Uniform Cost Search) 3、启发式(Heuristic search) 4、A*算法 4.1 算法细节 4.2 A与A*算法 4.3 A*算法证明 4.4 算法过程 三、具体实现 1、实验要求 2、代码实现 四、源代码        当我开始学习该算法时,网上已经有了很

    2023年04月08日
    浏览(52)
  • JavaScript+canvas实现一个旋转的3D球动画效果

    1. 获取Canvas元素和设置初始参数 这部分代码主要是获取Canvas元素,并根据设备的DPI进行缩放。然后,定义了一些全局变量,包括Canvas的宽度、高度、球体旋转的角度和存储所有点的数组。 2. 定义一些常量 这部分代码定义了一些常量,如点的数量、点的半径、球半径等。 3.定

    2024年01月18日
    浏览(54)
  • 【数据可视化】2D/3D动画

    ◼ CSS3 transform属性允许你旋转,缩放,倾斜或平移给定元素。 ◼ Transform是形变的意思(通常也叫变换),transformer就是变形金刚 ◼ 常见的函数transform function有: ---- 平移:translate(x, y) ---- 缩放:scale(x, y) ---- 旋转:rotate(deg) ---- 倾斜:skew(deg, deg) ◼ 通过上面的几个函数,我们

    2024年02月08日
    浏览(52)
  • 【数据分析与可视化】pyecharts可视化图表讲解及实战(超详细 附源码)

    需要源码请点赞关注收藏后评论区留言私信~~~ pyecharts是基于Echart图表的一个类库,而Echart是百度开源的一个可视化JavaScript库 pyecharts主要基于web浏览器进行显示,绘制的图形比较多,包括折线图、柱状图、饼图、漏斗图、地图、极坐标图等,代码量很少,而且很灵活,绘制出

    2024年02月01日
    浏览(46)
  • 【Python可视化大屏】全流程讲解pyecharts拖拽可视化大屏的背后原理

    目录 一、设计方案 二、项目背景 三、电影爬虫 3.1 导入库 3.2 发送请求 3.3 解析页面 3.4 存储到csv 四、数据持久化存储 4.1 导入库 4.2 存入MySQL 4.3 讲解视频 五、开发可视化大屏 5.1 柱形图 5.2 饼图 5.3 词云图 5.4 数据表格 5.5 涟漪散点图 5.6 条形图 5.7 大标题 5.8 Page组合 六、彩蛋

    2024年02月04日
    浏览(73)
  • 使用动画曲线编辑器打造炫酷的3D可视化ACE

    前言 在制作3D可视化看板时,除了精细的模型结构外,炫酷的动画效果也是必不可少的。无论是复杂的还是简单的动画效果,要实现100%的自然平滑都是具有挑战性的工作。这涉及到物理引擎的计算和对动画效果的数学建模分析。一般来说,只有专业的3D建模从业人员才能完成

    2024年02月03日
    浏览(48)
  • 【100天精通Python】Day67:Python可视化_Matplotlib 绘制动画,2D、3D 动画 示例+代码

            Matplotlib是一个Python绘图库,它提供了丰富的绘图功能,包括绘制动画。要绘制动画,Matplotlib提供了 FuncAnimation 类,允许您创建基于函数的动画。下面是一个详细的Matplotlib动画示例,演示了如何创建一个简单的动画。

    2024年02月07日
    浏览(44)
  • 一图胜千言!数据可视化多维讲解(Python)

    数据聚合、汇总和可视化是支撑数据分析领域的三大支柱。长久以来,数据可视化都是一个强有力的工具,被业界广泛使用,却受限于 2 维。在本文中,作者将探索一些有效的多维数据可视化策略(范围从 1 维到 6 维)。 描述性分析(descriptive analytics)是任何分析生命周期的

    2024年02月10日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包