canvas 图片加载

pen.drawImage(ele, showX, showY, imgWidth, imgHeight);

ele    将 img 元素 加载到画布上

  • 步骤

1. 创建一个 <img> 对象

var imgNode = new Image();

imgNode.src = "./img/bird.png";

2. 等待图片加载完成，再进行下一步操作

imgNode.onload = function(){

3. 图片显示到画布上

pen.drawImage(imgNode, 0, 0, 100, 100);

};

跳帧闪烁问题

  • 闪烁的原因：

    • 清空了画布，然后加载图片，再等图片加载完，最后画下一帧。
    • 这个空白延迟，主要是因为等待图片加载完成时间太久
  • 解法1： 
    • 在加载图片之前，不清空上一帧图像
    • 加载完成后，再清空画布，最后画下一帧。
      1. <!DOCTYPE html>
      2. <html>
      3.     <head>
      4.         <meta charset="UTF-8">
      5.         <title>帧闪烁解决</title>
      6.  
      7.         <style type="text/css">
      8.             * {
      9.                 margin: 0;
      10.                 padding: 0;
      11.             }
      12.  
      13.             body{
      14.                 text-align: center;
      15.             }
      16.  
      17.             #myCanvas{
      18.                 border: 1px solid ;
      19.             }
      20.         </style>
      21.     </head>
      22.  
      23.     <body>
      24.         <canvas id="myCanvas" width="800" height="400"></canvas>
      25.  
      26.         <!-- javascript 代码 -->
      27.         <script type="text/javascript">
      28.             window.onload = function () {
      29.                 var myCanvas = document.getElementById('myCanvas');
      30.  
      31.                 var painting = myCanvas.getContext('2d');
      32.  
      33.                 var num = 0;
      34.                 var speed = 0;
      35.                 setInterval(function(){
      36.                     speed += 20;
      37.                     if(speed > myCanvas.width){
      38.                         speed = -150
      39.                         //                speed = 0
      40.                     };
      41.  
      42.                     num++;
      43.                     if(num > 8){
      44.                         num = 1;
      45.                     };
      46.  
      47.                     painting.beginPath();
      48.  
      49.                     //1.img对象
      50.                     var imgNode = new Image();
      51.  
      52.                     //2.img对象 设置 src
      53.                     imgNode.src = 'img/q_r' + num + '.jpg';
      54.  
      55.                     //3.等图片加载完成后再去设置图片显示
      56.                     imgNode.onload = function () {
      57.                         //4.图片显示在画布上
      58.                         painting.clearRect(0, 0, myCanvas.width, myCanvas.height)
      59.                         painting.drawImage(imgNode, speed, 150, 150, 90);
      60.                     };
      61.                 }, 340);
      62.             };
      63.         </script>
      64.     </body>
      65. </html>

飞鸟 案例（双缓冲，解决跳帧闪烁问题）

    1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8" />
    5.         <title>canvas 双缓冲案例</title>
    6.  
    7.         <style type="text/css">
    8.             body {
    9.                 width: 100%;
    10.                 color: #000;
    11.                 background: #96b377;
    12.                 font: 14px Helvetica, Arial, sans-serif;
    13.             }
    14.  
    15.             .wrap {
    16.                 display: flex;
    17.                 flex-direction: column;
    18.                 justify-content: center;
    19.                 align-items: center;
    20.             }
    21.         </style>
    22.     </head>
    23.  
    24.     <body>
    25.  
    26.         <div id="box" class="wrap">
    27.         </div>
    28.  
    29.         <!-- javascript 代码 -->
    30.         <script type="text/javascript">
    31.             //                 创建 画布的width  画布的height  背景颜色 父元素
    32.             function createCanvasTo(canvasWidth, canvasHeight, bgColor, parentObj){
    33.                 var myCanvas = document.createElement("canvas");
    34.                 myCanvas.width = canvasWidth;
    35.                 myCanvas.height = canvasHeight;
    36.                 myCanvas.innerText = " 您的浏览器不支持 canvas，建议更新或者更换浏览器。";
    37.                 if(bgColor){
    38.                     myCanvas.style.backgroundColor = bgColor;
    39.                 };
    40.                 if(parentObj){
    41.                     parentObj.appendChild(myCanvas);
    42.                 };
    43.  
    44.                 return myCanvas;
    45.             };
    46.  
    47.             var box = document.getElementById("box");
    48.  
    49.             var topCanvas = createCanvasTo(600, 83, "#fff", box);
    50.             movingPic(topCanvas, "./img/q_r", "jpg", -150, 0, 150, 83);
    51.  
    52.             var bottomCanvas = createCanvasTo(600, 300, "#fff", box);
    53.             movingPic(bottomCanvas, "./img/walking", "png", -130, 27, 130, 246);
    54.  
    55.             //                 画布对象 图片路径 图片类型 起始x 起始y 图片width 图片height
    56.             function movingPic(theCanvas, imgPath, imgType, posX, posY, imgWidth, imgHeight){
    57.                 var cacheCanvas = document.createElement("canvas");
    58.                 cacheCanvas.width = theCanvas.width;
    59.                 cacheCanvas.height = theCanvas.height;
    60.                 var cachePen = cacheCanvas.getContext("2d");
    61.  
    62.                 var num = 1;
    63.                 var pos = 0;
    64.                 window.setInterval(function(){
    65.                     pen = theCanvas.getContext("2d");    // 坑1: 一定要放在循环里面
    66.                     pen.clearRect(0, 0, theCanvas.width, theCanvas.height);
    67.  
    68.                     // 图形位移变换
    69.                     num++;
    70.                     if(num > 8){
    71.                         num = 1;
    72.                     };
    73.  
    74.                     pos += 15;
    75.                     if(posX+pos > theCanvas.width){
    76.                         pos = -130;
    77.                     };
    78.  
    79.                     // 双缓冲绘制    先画到临时 canvas
    80.                     cachePen.save();
    81.                     cachePen.beginPath();
    82.                     var imgObj = new Image();
    83.                     imgObj.src = imgPath+num+"."+imgType;
    84.                     imgObj.onload = function(){
    85.                         cachePen.drawImage(imgObj, posX+pos, posY, imgWidth,imgHeight);
    86.                     };
    87.                     cachePen.restore();
    88.  
    89.                     // 再转到正式 canvas
    90.                     pen.save();
    91.                     pen.drawImage(cacheCanvas, 0, 0, cacheCanvas.width, cacheCanvas.height);
    92.                     pen.restore();
    93.  
    94.                     // 坑2: 一定要在 取走缓冲内容后 再清除缓冲
    95.                     cachePen.clearRect(0, 0, cacheCanvas.width, cacheCanvas.height);
    96.                 }, 100);
    97.             };
    98.         </script>
    99.     </body>
    100. </html>

HTML5_canvas_图片加载_双缓冲_跳帧闪烁问题的更多相关文章

  1. android图片的异步加载和双缓存学习笔记——DisplayImageOptions （转）

    转的地址:http://hunankeda110.iteye.com/blog/1897961 1 //设置图片在下载期间显示的图片 2 showStubImage(R.drawable.ic_lau ...

  2. 关于图片加载非常爽的一个三方控件 fresco，一个三fresco

    Hi  EveryBody 今天来玩一个非常爽的控件 fresco 到底有多爽呢 接着看就知道了 首先 来看看fresco 是个神马东西 https://github.com/facebook/fre ...

  3. iOS开发——图形编程Swift篇&CAShapeLayer实现圆形图片加载动画

    CAShapeLayer实现圆形图片加载动画 几个星期之前,Michael Villar在Motion试验中创建一个非常有趣的加载动画. 下面的GIF图片展示这个加载动画,它将一个圆形进度指示器和圆形 ...

  4. Android 平滑图片加载和缓存库 Glide 使用详解

    在图片加载库烂大街的今天,选择一个适合自己使用的图片加载库已经成为了每一个Android开发者的必经之路.现在市面上知名的图片加载库有UIL,Picasso,Volley ImageLoader,Fr ...

  5. 使用CAShapeLayer来实现圆形图片加载动画[译]

    原文链接 : How To Implement A Circular Image Loader Animation with CAShapeLayer 原文作者 : Rounak Jain 译文出自 ...

  6. Swift - 表格图片加载优化（拖动表格时不加载，停止时只加载当前页图片）

    列表的单元格中包含有图片在开发中很常见.通常我们可以直接在tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIn ...

  7. Python 植物大战僵尸代码实现: 图片加载和显示切换

    游戏介绍以前很火的植物大战僵尸游戏, 本想在网上找个python版本游戏学习下,无奈没有发现比较完整的,那就自己来写一个把.图片资源是从github上下载的,因为图片资源有限,只能实现几种植物和僵尸. ...

  8. Android中常见的图片加载框架

    图片加载涉及到图片的缓存.图片的处理.图片的显示等.而随着市面上手机设备的硬件水平飞速发展,对图片的显示要求越来越高,稍微处理不好就会造成内存溢出等问题.很多软件厂家的通用做法就是借用第三方的框架进行 ...

  9. imagepool前端图片加载管理器(JavaScript图片连接池)

    前言 imagepool是一款管理图片加载的JS工具,通过imagepool可以控制图片并发加载个数. 对于图片加载,最原始的方式就是直接写个img标签,比如:<img src="图片 ...

随机推荐

  1. 金融量化分析【day112】:股票数据分析Tushare2

    目录 1.使用tushare包获取某股票的历史行情数据 2.使用pandas包计算该股票历史数据的5日局限和60日均线 3.matplotlib包可视化历史数据的收盘价和历史均线 4.分析输出所有金叉 ...

  2. C#windows服务调试技巧

    1.创建项目 2.为了方便调试,设置为控制台程序 3.修改Service1代码 4.修改Main代码 这样当使用-console方式启动时,就是以普通的控制台方式启动,方便调试程序. 5.其它安装之类 ...

  3. python,可变对象，不可变对象，深拷贝，浅拷贝。

    学习整理,若有问题,欢迎指正. python 可变对象,不可变对象 可变对象 该对象所指定的内存地址上面的值可以被改变,变量被改变后,其所指向的内存地址上面的值,直接被改变,没有发生复制行为,也没有发 ...

  4. mysql root password

    """centos:mysql忘记root密码解决 1.修改MySQL的登录设置: # vim /etc/my.cnf 在[mysqld]的段中加上一句:skip-gra ...

  5. C# 处理文件的压缩与解压

    最近做了一个关于winform 程序更新下载的功能,大概思路是,程序检测到服务端系统版本号发生改变,系统需要更新:这时请求服务端更新地址,下载更新包到程序的根目录,更新包是一个压缩包,下载完后再把压缩 ...

  6. Mysql的跨服务器 关联查询--Federated引擎

    1.确认开启Federated引擎     查询FEDERATED功能是否开启: show ENGINES;       2.如果状态为NO则需修改my.ini文件,增加一行federated配置: ...

  7. 【洛谷P1303A*Bprublem】

    题目描述 求两数的积. 输入输出格式 输入格式: 两行,两个数. 输出格式: 积 输入输出样例 输入样例#1: 1 2 输出样例#1: 2 说明 每个数字不超过10^2000,需用高精 这道题还是比较 ...

  8. 002_soa_zk处理经验总结

    一. 遇到这种情况直接把当前目录下的acceptedEpoch和currentEpoch挪走,重启publisher即可. cat /data/zookeeper/data/version-2/acc ...

  9. 【原创】Java基础之常用JVM工具

    查看当前所有java进程 # jps 查看某个进程的堆内存占用情况 # jmap -heap $pid 查看某个进程的堆内存中对象分布情况 # jmap -histo $pid 将某个进程的堆内存导出 ...

  10. thinkphp5.0 ajax分页

    放到    ***thinkphp\library\think\paginator\driver\Ajaxbootstrap.php 分页的type参数为ajaxbootstrap <?php/ ...