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： 
    • 在加载图片之前，不清空上一帧图像
    • 加载完成后，再清空画布，最后画下一帧。
    • <!DOCTYPE html>
      
<html>
      
    <head>
      
        <meta charset="UTF-8">
      
        <title>帧闪烁解决</title>

        <style type="text/css">
      
            * {
      
                margin: 0;
      
                padding: 0;
      
            }

            body{
      
                text-align: center;
      
            }

            #myCanvas{
      
                border: 1px solid ;
      
            }
      
        </style>
      
    </head>

    <body>
      
        <canvas id="myCanvas" width="800" height="400"></canvas>

        <!-- javascript 代码 -->
      
        <script type="text/javascript">
      
            window.onload = function () {
      
                var myCanvas = document.getElementById('myCanvas');

                var painting = myCanvas.getContext('2d');

                var num = 0;
      
                var speed = 0;
      
                setInterval(function(){
      
                    speed += 20;
      
                    if(speed > myCanvas.width){
      
                        speed = -150
      
                        //                speed = 0
      
                    };

                    num++;
      
                    if(num > 8){
      
                        num = 1;
      
                    };

                    painting.beginPath();

                    //1.img对象
      
                    var imgNode = new Image();

                    //2.img对象 设置 src
      
                    imgNode.src = 'img/q_r' + num + '.jpg';

                    //3.等图片加载完成后再去设置图片显示
      
                    imgNode.onload = function () {
      
                        //4.图片显示在画布上
      
                        painting.clearRect(0, 0, myCanvas.width, myCanvas.height)
      
                        painting.drawImage(imgNode, speed, 150, 150, 90);
      
                    };
      
                }, 340);
      
            };
      
        </script>
      
    </body>
      
</html>

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

  • <!DOCTYPE html>
    
<html>
    
    <head>
    
        <meta charset="UTF-8" />
    
        <title>canvas 双缓冲案例</title>

        <style type="text/css">
    
            body {
    
                width: 100%;
    
                color: #000;
    
                background: #96b377;
    
                font: 14px Helvetica, Arial, sans-serif;
    
            }

            .wrap {
    
                display: flex;
    
                flex-direction: column;
    
                justify-content: center;
    
                align-items: center;
    
            }
    
        </style>
    
    </head>

    <body>

        <div id="box" class="wrap">
    
        </div>

        <!-- javascript 代码 -->
    
        <script type="text/javascript">
    
            //                 创建 画布的width  画布的height  背景颜色 父元素
    
            function createCanvasTo(canvasWidth, canvasHeight, bgColor, parentObj){
    
                var myCanvas = document.createElement("canvas");
    
                myCanvas.width = canvasWidth;
    
                myCanvas.height = canvasHeight;
    
                myCanvas.innerText = " 您的浏览器不支持 canvas，建议更新或者更换浏览器。";
    
                if(bgColor){
    
                    myCanvas.style.backgroundColor = bgColor;
    
                };
    
                if(parentObj){
    
                    parentObj.appendChild(myCanvas);
    
                };

                return myCanvas;
    
            };

            var box = document.getElementById("box");

            var topCanvas = createCanvasTo(600, 83, "#fff", box);
    
            movingPic(topCanvas, "./img/q_r", "jpg", -150, 0, 150, 83);

            var bottomCanvas = createCanvasTo(600, 300, "#fff", box);
    
            movingPic(bottomCanvas, "./img/walking", "png", -130, 27, 130, 246);

            //                 画布对象 图片路径 图片类型 起始x 起始y 图片width 图片height
    
            function movingPic(theCanvas, imgPath, imgType, posX, posY, imgWidth, imgHeight){
    
                var cacheCanvas = document.createElement("canvas");
    
                cacheCanvas.width = theCanvas.width;
    
                cacheCanvas.height = theCanvas.height;
    
                var cachePen = cacheCanvas.getContext("2d");

                var num = 1;
    
                var pos = 0;
    
                window.setInterval(function(){
    
                    pen = theCanvas.getContext("2d");    // 坑1: 一定要放在循环里面
    
                    pen.clearRect(0, 0, theCanvas.width, theCanvas.height);

                    // 图形位移变换
    
                    num++;
    
                    if(num > 8){
    
                        num = 1;
    
                    };

                    pos += 15;
    
                    if(posX+pos > theCanvas.width){
    
                        pos = -130;
    
                    };

                    // 双缓冲绘制    先画到临时 canvas
    
                    cachePen.save();
    
                    cachePen.beginPath();
    
                    var imgObj = new Image();
    
                    imgObj.src = imgPath+num+"."+imgType;
    
                    imgObj.onload = function(){
    
                        cachePen.drawImage(imgObj, posX+pos, posY, imgWidth,imgHeight);
    
                    };
    
                    cachePen.restore();

                    // 再转到正式 canvas
    
                    pen.save();
    
                    pen.drawImage(cacheCanvas, 0, 0, cacheCanvas.width, cacheCanvas.height);
    
                    pen.restore();

                    // 坑2: 一定要在 取走缓冲内容后 再清除缓冲
    
                    cachePen.clearRect(0, 0, cacheCanvas.width, cacheCanvas.height);
    
                }, 100);
    
            };
    
        </script>
    
    </body>
    
</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. SQLMAP注入教程-11种常见SQLMAP使用方法详解

    sqlmap也是渗透中常用的一个注入工具,其实在注入工具方面,一个sqlmap就足够用了,只要你用的熟,秒杀各种工具,只是一个便捷性问题,sql注入另一方面就是手工党了,这个就另当别论了.今天把我一直 ...

  2. ArcGis Python脚本——根据接图表批量裁切分幅影像

    年前写了一个用渔网工具制作图幅接图表的文章,链接在这里: 使用ArcMap做一个1:5000标准分幅图并编号 本文提供一个使用ArcMap利用接图表图斑裁切一幅影像为多幅的方法. 第一步,将接图表拆分 ...

  3. IP地址转为二进制,去掉0b补齐八位拼接,再转为十进制

    #!/usr/bin/env python# -*- coding:utf-8 -*- ip = '192.168.0.1' # 转为二进制:# 方法一'''eve = ip.split('.')s ...

  4. [物理学与PDEs]第2章习题13 将 $p$ - 方程组化为守恒律形式的一阶拟线性对称双曲组

    试引进新的未知函数, 将 $p$ - 方程组 $$\beex \bea \cfrac{\p \tau}{\p t}-\cfrac{\p u}{\p x}&=0,\\ \cfrac{\p u}{ ...

  5. Java Swing实现一个简单而优美的记事本( 较详细注释 )

    Java Swing实现具有基本功能的记事本 目前实现了: 文件 新建 打开 保存 退出前保存询问 编辑 剪切 复制 粘贴 清除 撤销 格式 字体选择 字体颜色选择 帮助 关于 (样式采用了css与h ...

  6. 2.5 elif

    elif 想一想: if能完成当xxx时做事情 if-else能完成当xxx时做事情1,否则做事情2 如果有这样一种情况:当xxx1满足时做事情1:当xxx1不满足.xxx2满足时做事情2:当xxx2 ...

  7. HttpReponse

    属性: django将请求报文中的请求行.头部信息.内容主体封装成 HttpRequest 类中的属性.   除了特殊说明的之外,其他均为只读的. 0.HttpRequest.scheme   表示请 ...

  8. java读写分离的实现

    1.  背景 我们一般应用对数据库而言都是“读多写少”,也就说对数据库读取数据的压力比较大,有一个思路就是说采用数据库集群的方案, 其中一个是主库,负责写入数据,我们称之为:写库: 其它都是从库,负责 ...

  9. mysql 迁移

    背景 这次做oracle数据迁移,也想总结像mysql的数据迁移方式.简单列下吧,因为具体方式网上很多. 方式 可以通过修改mysql.ini的数据文件目录位置方法实现拷贝迁移,此种方式简单 通过备份 ...

  10. js中split 正则表示式 (/[,+]/)

    定义和用法 split() 方法用于把一个字符串分割成字符串数组. 语法 stringObject.split(separator,howmany) separator 作为分隔符,separator ...