zoukankan      html  css  js  c++  java
  • 如何在html5的canvas画布中绘制gif动态图片

      我们都知道如何在html5的canvas画布上绘制静态图片(jpeg, png等),直接用canvas中的drawImage方法即可,那么如何绘制动态图片(gif)?

    相信大家都知道动态图片之所以动态,是因为它是由很多图片按一定的帧数顺序播放而成的,因此我们是否也可以模拟这样的帧数,每隔一定的时间重新

    绘制图片,就能画出动态图片呢?答案当然是YES。下面就是我自己测试的一个例子,代码如下:

     1 <!DOCTYPE HTML>
     2 <html>
     3     <head>
     4         <meta charset="utf-8" />
     5         <title>canvas上画动态图,视频也可以画</title>
     6         
     7         <script type="text/javascript">
     8             window.onload = function() {
     9                 var img = document.getElementById('img1');
    10                 var can = document.getElementById('can');
    11                 var cxt = can.getContext('2d');
    12                 
    13                 
    14                 setInterval(function (){cxt.drawImage(img, 0, 0);}, 20);
    15             }
    16         </script>
    17     </head>
    18     
    19     <body>
    20         <p>准备绘制的动态图片:</p>
    21         <img id="img1" src="ex.gif" alt="你的浏览器不支持img标签"></img>
    22         <p>canvas画布上绘制的动态图片:</p>
    23         <canvas id="can" width="800px" height="600px" style="background-color: #CCCCCC">你的浏览器不支持canvas标签</canvas>
    24     </body>
    25 </html>
    这是本文中例子使用的动态图片资源ex.gif:
  • 相关阅读:
    AtCoder Grand Contest 019
    upd 2020.10.31
    ubuntu 自动配置脚本
    linux下gcc、g++不同版本的安装和切换
    fixes for 100% disk usage on Windows 10
    简单聊聊VisualStudio的断点调试
    运算符重载
    设计模式之桥接模式
    使用C#进行数据库增删改查ADO.NET(三)
    使用C#进行数据库增删改查ADO.NET(二)
  • 原文地址:https://www.cnblogs.com/ldjhust/p/3773764.html
Copyright © 2011-2022 走看看