canvas动画及案例

最新推荐文章于 2024-07-21 02:40:53 发布
最新推荐文章于 2024-07-21 02:40:53 发布
阅读量2.9k 收藏 10
点赞数 1
分类专栏： 动画与可视化 文章标签： javascript 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yunbabac/article/details/129181324
版权
文章介绍了如何利用JavaScript和HTML5CanvasAPI创建动画，强调了使用requestAnimationFrame优化性能的重要性。示例包括太阳系动画，展示了如何绘制并动态旋转太阳、地球和月亮，以及创建实时更新的时钟动画，显示小时、分钟和秒针的转动。
摘要由CSDN通过智能技术生成

介绍

由于我们是用 JavaScript 去操控 对象，这样要实现一些交互动画也是相当容易的。
可能最大的限制就是图像一旦绘制出来，它就是一直保持那样了。如果需要移动它，我们不得不对所有东西（包括之前的）进行重绘。重绘是相当费时的，而且性能很依赖于电脑的速度。

动画基本步骤

  1. 清空 canvas 除非接下来要画的内容会完全充满 canvas（例如背景图），否则你需要清空所有。最简单的做法就是用 clearRect 方法。
  2. 保存 canvas 状态 如果你要改变一些会改变 canvas 状态的设置（样式，变形之类的），又要在每画一帧之时都是原始状态的话，你需要先保存一下。
  3. 绘制动画图形（animated shapes） 这一步才是重绘动画帧。
  4. 恢复 canvas 状态 如果已经保存了 canvas 的状态，可以先恢复它，然后重绘下一帧

更新画布

  1. setInterval(function, delay)（不推荐，不准确，宏任务）
    当设定好间隔时间后，function 会定期执行。

  2. setTimeout(function, delay)（不推荐，不准确，宏任务）
    在设定好的时间之后执行函数

  3. requestAnimationFrame(callback)
    告诉浏览器你希望执行一个动画，并在重绘之前，请求浏览器执行一个特定的函数来更新动画。
    一般每秒钟回调函数执行 60 次

太阳系动画

<script>
        window.onload= function() {
            const canvasEl = document.getElementById('myCanvas')
            if (!canvasEl.getContext) {
                return
            }
            const ctx = canvasEl.getContext('2d')
            let sun = new Image()
            sun.src = '../images/canvas_sun.png'
            let earth = new Image()
            earth.src = '../images/canvas_earth.png'
            let moon = new Image()
            moon.src = '../images/canvas_moon.png'
            requestAnimationFrame(draw)
            // 一秒钟大概重绘60次
            function draw() {
                ctx.clearRect(0,0,300,300)
                ctx.save()
                // 绘制背景
                drawSun()
                // 绘制地球
                drawEarth()
                ctx.restore()
                requestAnimationFrame(draw)
            }
        
            function drawSun() {
                ctx.save()
                ctx.drawImage(sun,0,0)
                // 绘制轨道线
                ctx.translate(150,150)
                ctx.strokeStyle = 'rgba(255,255,255,0.3)'
                ctx.beginPath()
                ctx.arc(0,0,100,0,Math.PI * 2)
                ctx.stroke()
                ctx.restore()
            }
            function drawEarth() {
                ctx.save()
                ctx.translate(150,150)
                // 地球旋转（一分钟一周）
                // 获取当前时间miao 
                let Seconds = new Date().getSeconds()
                let milliseconds = new Date().getMilliseconds()
                // 一周Math.PI * 2
                // 180 Math.PI * 1
                // 一秒：Math.PI * 2 / 60
                // 一毫秒：Math.PI * 2 / 60 / 1000
                ctx.rotate(Math.PI * 2 / 60 * Seconds + Math.PI * 2 / 60 / 1000 * milliseconds)
                ctx.translate(100,0)
                ctx.drawImage(earth,-12,-12)
                
                // 绘制月球
                drawMoon(Seconds,milliseconds)
                // 绘制蒙版
                drawMengban()
                ctx.restore()
            }
            function drawMoon(Seconds,milliseconds) {
                ctx.save()
                // 月球旋转（10s一周）
                // 一秒： Math.PI * 2 / 10
                //一毫秒：Math.PI * 2 / 10 / 1000
                ctx.rotate(Math.PI * 2 / 10 * Seconds + Math.PI * 2 / 10 / 1000 * milliseconds)
                ctx.translate(30,0)
                ctx.drawImage(moon,-3.5,-3.5)
                ctx.restore()
            }
            function drawMengban() {
                ctx.save()
                ctx.fillStyle = 'rgba(0,0,0,0.3)'
                ctx.fillRect(0,-15,40,30)
                ctx.restore()
                
            }
        
        }

        
    </script>

在这里插入图片描述

时钟动画

<body>
  <div class="clock">
    <canvas id="tutorial" width="300" height="300px">
      你的浏览器不兼容Canvas,请升级您的浏览器!
    </canvas>
  </div>
  <script>
    window.onload = function() {
      let canvasEl = document.getElementById('tutorial')
      if(!canvasEl.getContext){
        return
      }
      let ctx = canvasEl.getContext('2d') // 2d | webgl
      requestAnimationFrame(draw)

      /**
       1秒钟会回调 61次
      */
      function draw() {
        ctx.clearRect(0, 0, 300, 300)
        ctx.save()
        let time = new Date()
        let hours = time.getHours()
        let minute = time.getMinutes()
        let second = time.getSeconds()

        // 1.绘制背景(白色圆)
        drawBg()
        // 2.绘制的数字
        drawNumbers()
        // 3.绘制时针
        drawHours(hours, minute, second)
        // 3.绘制分针
        drawMinute(minute, second)
        // 4.绘制秒针
        drawSecond(second)
        // 5.绘制圆心
        drawCircle()
        // 6.画圆上的时针的刻度
        drawHoursTick()
        // 7.画圆上的分针的刻度
        drawMinuteTick()
        ctx.restore()
        requestAnimationFrame(draw)
      }

      function drawBg(){
        ctx.save()
        ctx.translate(150, 150)
        ctx.fillStyle ='white'
        ctx.beginPath()
        ctx.arc(0,0, 130, 0, Math.PI * 2)
        ctx.fill()
        ctx.restore()
      }

      function drawNumbers(){
        ctx.save()
        ctx.translate(150, 150)

        // 开始画 3 数字
        ctx.font = "30px fangsong"
        ctx.textBaseline = 'middle'
        ctx.textAlign = 'center'

        let numbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]
        for(let i =0; i<numbers.length; i++){
          // i = 3 , 0 
          // i = 4 , 占 1份, Math.PI * 2 / 12 * i  
          let x = Math.cos(Math.PI * 2 / 12 * i) * 100
          let y = Math.sin(Math.PI * 2 / 12 * i) * 100
          ctx.fillText(numbers[i], x, y)
        }
        ctx.restore()
      }
      function drawHours(hours, minute, second) {
        ctx.save()
        ctx.translate(150, 150) // 坐标轴原点在园的中心

        // Math.PI * 2 一整个圆
        // Math.PI * 2 / 12  1h
        // Math.PI * 2 / 12 / 60  1min
        // Math.PI * 2 / 12 / 60 / 60  1secon

        // 1h + 1min + 1 second = 弧度?
        ctx.rotate(
          Math.PI * 2 / 12 * hours +
          Math.PI * 2 / 12 / 60 * minute +
          Math.PI * 2 / 12 / 60 / 60 * second 
        )
        ctx.lineWidth = 5
        ctx.lineCap = 'round'
        ctx.beginPath()
        ctx.moveTo(0,0)
        ctx.lineTo(0, -50)
        ctx.stroke()
        ctx.restore()
      }

      function drawMinute(minute, second) {
        ctx.save()
        ctx.translate(150, 150) // 坐标轴原点在园的中心

        // Math.PI * 2 一整个圆
        // Math.PI * 2 / 60  1min
        // Math.PI * 2 / 60 / 60  1sec

        // 59min + 59 second = 弧度?
        ctx.rotate(
          Math.PI * 2 / 60 * minute +
          Math.PI * 2 / 60 / 60 * second 
        )
        ctx.lineWidth = 3
        ctx.lineCap = 'round'
        ctx.beginPath()
        ctx.moveTo(0,0)
        ctx.lineTo(0, -70)
        ctx.stroke()
        ctx.restore()
      }

      function drawSecond(second) {
        ctx.save()
        ctx.translate(150, 150) // 坐标轴原点在园的中心

        // Math.PI * 2 一整个圆
        // Math.PI * 2 / 60   1sec

        // 1 second = 弧度?
        ctx.rotate(
          Math.PI * 2 / 60 * second 
        )
        ctx.strokeStyle = 'red'
        ctx.lineWidth = 2
        ctx.lineCap = 'round'
        ctx.beginPath()
        ctx.moveTo(0,0)
        ctx.lineTo(0, -80)
        ctx.stroke()
        ctx.restore()
      }

      function drawCircle() {
        ctx.save()
        ctx.translate(150, 150)

        ctx.beginPath()
        ctx.arc(0, 0, 8, 0, Math.PI*2)
        ctx.fill()

        ctx.fillStyle = 'gray'
        ctx.beginPath()
        ctx.arc(0, 0, 5, 0, Math.PI*2)
        ctx.fill()

        ctx.restore()
      }

      function drawHoursTick() {
        ctx.save()
        ctx.translate(150, 150)

        for(let j = 0; j< 12 ; j ++){
          ctx.rotate(Math.PI * 2 / 12 )
          ctx.lineWidth = 3
          ctx.beginPath()
          ctx.moveTo(0, -130)
          ctx.lineTo(0, -122)
          ctx.stroke()
        }

        ctx.restore()
      }

      function drawMinuteTick() {
        ctx.save()
        ctx.translate(150, 150)
        for(let j = 0; j< 60 ; j ++){
          ctx.rotate(Math.PI * 2 / 60 )
          ctx.lineWidth = 1
          ctx.beginPath()
          ctx.moveTo(0, -130)
          ctx.lineTo(0, -125)
          ctx.stroke()
        }
        ctx.restore()
      }
    }
  </script>
</body>

在这里插入图片描述

参考

链接: mdn

是云呀！
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Canvas动画
天空之外
07-23 4023
1：Canvas动画原理 快速切换的静态画面。 2：基本步骤 绘制 - 清空 - 绘制 - 清空 - 绘制 … 3：控制函数 setTimeout setInterval requestAnimationFrame 4：四种运动 线性运动 const canvas = document.getElementById('canvas'); /* 获得 2d 上下文对象...
canvas动画学习案例.zip
02-02
3D效果星空，带鼠标点击事件.html 六边形轨迹蔓延.html 鼠标跟随炫光.html 鼠标跟随炫光2.html 鼠标移动追随特效.html 远近视角切换方格路径线.html 运动中的闪烁星空.html 运动中的银河系.html ...
可视化系列讲解：canvas的动画实现
wangyuiba1314的博客
01-02 7628
前端可视化系列讲解：css3D，svg，canvas等
浅谈Canvas中的动画效果
最新发布
weixin_41479756的博客
07-21 60
动画片大家都看过，本质上就是快速的播放一张张图片，在canvas中要实现动画效果，同样也是这个原理，当我们把图形绘制到canvas上，它就变成了一张图片，不会再改变，我们可以修改图形的位置和样式属性，然后把画布清空，再重新绘制，就得到了一张新的图片，我们可以不断的重复这个过程，快速的擦除重绘就得到了动画的效果。定时重绘要定...
奇妙的HTML5 Canvas动画实例
蒋宇捷的专栏
03-31 7103
<br />    今日Google首页：铯元素的发现者 - 化学家罗伯特·本生 200 周年诞辰，利用HTML5 Canvas和静态图片实现了奇妙的动画效果。<br /><br />    动画中使用了多个Canvas典型的API，例如translate、addColorStop、moveTo、lineTo、rotate、drawImage等等，这些API并不难理解，但是转换成动画需要很强的前端能力。<br />    示例代码和Demo地址：http://namepk.sinaapp.com/demo/
canvas动画案例
木易一
02-20 552
案例一 效果图如下： 代码： &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; *{ margin: 0; p
canvas 制作动画（上）
p1967914901的博客
06-15 2127
实际上，画布中的动画与一般的动画在理论上并没有太大的区别。深入研究动画的本质可以发现：动画只是一连串的图像，每个图像之间的差别非常微小，并且它们以极快的速度连续显示。其中的奥妙就在于，每秒钟显示的图像非常多，人的肉眼通常认为自己看到的是一个正在运动的物体，而不是一张张连续显示的静态图像。其原理就像翻书一样，如果翻书的速度足够快，一些小图形看上去就好像在运动。当然，你不能在画布中翻页，因此需要采用其他方法来创建动画效果。仔细思考一下，你就会发现当使用代码创建动画时，只有一张纸可用，这张纸就是计算机屏幕。这意味
Canvas绘制动画
越陌度阡
06-16 2193
给大家分享一个用Canvas写的"小人吃豆"的动画，效果如下： 哈哈，实现代码如下： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Canvas绘制动画</title> <style&g......
阿波罗的轻语
weixin_45820444的博客
08-20 9184
JS中的Canvas动画 几天没写博客了，今天又忙到很晚，教大家做一个波浪花环吧 效果图如上所示： 老规矩先把代码给大家，新建一个html文档(新建一个txt文本文档，把后缀名改为“ .html ”),以记事本打开，把复制好的代码粘贴进去，“ 保存 ”，退出，双击或右键选择浏览器打开。 祝大家前端学习愉快，在今后的日子中与君共勉 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g
canvas动画案例.html
03-09
canvas动画案例.html
Canvas边框粒子加载动画特效
06-24
"Canvas边框粒子加载动画特效"是利用Canvas技术来创建的一种动态加载效果，这种效果通常用于网页加载时显示进度，给用户带来视觉上的反馈，增加交互体验。 首先，我们要理解Canvas的基本用法。Canvas是一个二维绘图...
在Canvas上显示动画
11-04
如果想为自定义的UI控件添加动画效果，会发现动画相关的API是很有限的。那么有没有API可以直接向屏幕绘图呢？答案是肯定的。Android提供了Canvas满足这一要求。
时空穿梭canvas动画
12-19
时空穿梭canvas动画 canvas { display: block; margin: auto; background-color: black; } <canvas id="starfield"></canvas> <script src="canvas.js"> ``` 接着，我们创建一个名为"canvas.js"的...
Canvas火箭飞行动画特效
06-24
在这个“Canvas火箭飞行动画特效”中，我们主要探讨的是如何利用Canvas API来实现一个交互式的火箭飞行游戏。 首先，Canvas API的核心是`<canvas>`元素，它是HTML5新增的标签，用于在网页上创建画布。开发者可以...
canvas动画
ck2580的博客
05-10 2709
canvas与动画 1. 什么是canvas canvas 是一个可以使用脚本(通常为 JavaScript 来绘制图形的 HTML 元素.例如,它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画. <canvas> 最早由Apple引入WebKit，用于Mac OS X 的 Dashboard，随后被各个浏览器实现。如今，所有主流的浏览器都支持它。 Canvas API 提供了一个通过 JavaScript 和 HTML 的 canvas 元素来绘制图形的方式。它可以用于
canvas绘制动画
qq_21277357的博客
01-02 232
【代码】canvas绘制动画。
关于canvas的简单动画
m0_54089303的博客
11-01 312
线性动画：原理就是清空---绘制---清空---绘制 在俩次绘制的过程中，只需要改变绘制的起始点的一个坐标就行。代码如下 html代码： <canvas id="c1" width="600" height="600" style="border:1px solid red"></canvas> js代码： <canvas id="c1" width="600" height="600" style="border:1px solid red">&l.
HTML5 Canvas动画实例
不断学习，不断进步，提高自己
06-28 2152
在开发在线游戏时，绘制动画是非常重要的。本文介绍一个使用Canvas API实现的动画实例——游戏人物的跑步动画。
HTML5 Canvas：原生互动与动画技术
Canvas元素是一个二维画布，通过JavaScript来控制，可以实现动态图形、动画、数据可视化等多种功能，极大地扩展了网页的表现力。 本书《HTML5 Canvas》详细讲解了如何利用Canvas API进行图形编程，内容包括但不限于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值