离屏操作：

1.创建一个新的离屏canvas;

2.把一些复杂额绘画操作（背景），画在离屏canvas上；

3.将离屏canvas通过drawImage（离屏canvas对象，x1,y1,offcanvas.width,offcanvas.height,x2,y2,canvas.width,canvas.height）拷贝到原始的canvas上，减少不断绘制复杂操作，提高性能-----最后使用css：display：none将离屏canvas隐藏；

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>离屏canvas</title>

        <style>

            canvas{

                border: 1px solid red;

            }

            #offCanvas{

/*                 display: none; */

            }

        </style>

    </head>

    <body>

        <canvas id="myCanvas">您的浏览器不支持canvas</canvas>

        <canvas id="offCanvas">您的浏览器不支持canvas</canvas>

        <script>

            var canvas = document.getElementById("myCanvas");

            var ctx = canvas.getContext("2d");

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

            var offCtx = offCanvas.getContext("2d");

            var posx = 0,posy = 0,dir = 1,isMouseInRect = false;

            var drawALot = function(){

                for(var k=0;k<20;k++){

                    for(var i=0;i<canvas.width;i+=10){

                        for(var j=0;j<canvas.height;j+=10){

                            offCtx.beginPath();

                            offCtx.arc(i,j,5,0,2*Math.PI,true);

                            offCtx.stroke();

                        }

                    }

                }

            }

            canvas.onmousemove = function(e){

                var mouseX = e.offsetX;

                var mouseY = e.offsetY;

                if(mouseX > posx && mouseX < posx + 50 && mouseY > posy && mouseY < posy +50){

                    isMouseInRect = true;

                }else{

                    isMouseInRect = false;

                }

            }

            setInterval(function(){

                if(!isMouseInRect){

                    posx += 10 *dir;

                }

                //清空画布区域

                ctx.clearRect(0,0,canvas.width,canvas.height);

                //drawALot();

                //使用drawImage(canvas对象)拷贝到原始canvas上

                ctx.drawImage(offCanvas,0,0,offCanvas.width,offCanvas.height,0,0,canvas.width,canvas.height);

                ctx.fillRect(posx,posy,50,50);

                if(posx+50 >= canvas.width){

                    dir = -1;

                }else if(posx <=0){

                    dir = 1;

                }

            },100);

            drawALot();

        </script>

    </body>

</html>

canvas——离屏的更多相关文章

  1. html5 canvas首屏自适应背景动画循环效果代码

    模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...

  2. canvas离屏技术与放大镜实现

    教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步>>> (原文)canvas 离屏技术与放大镜实现. 更多讨论或者错误提交,也请移步. 利用canvas除了可以实现 ...

  3. Canvas清屏的实现

    /** * Canvas清屏的操作 * * 參考资料: http://blog.csdn.net/lfdfhl/article/details/9076001 * */ private void cl ...

  4. 【HTML】html5 canvas全屏烟花动画特效

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  5. js 利用canvas + flv.js实现视频流 截屏 、本地下载功能实现，兼容火狐，谷歌；canvas截屏跨域问题，无音频视频流加载不显示问题

    项目:物联网监控项目----后台视频流管理(前端实现视频截屏功能) 本文就不同视频源分情况展示: 1 本地视频(项目同目录视频)截屏(canvas.getContext("2d).drawI ...

  6. Tips——canvas闪屏问题的处理

    一.问题描述 在画canvas时,遇到屏幕瞬间空白的情况(大约1~2帧),造成用户体验不好. 二.原因 canvas的绘图过程是:先擦出整个画布:然后浏览器到达重绘时间点后,在空白的canvas上作画 ...

  7. canvas离屏、旋转效果实践——旋转的雪花

    效果展示理论基础--"常见的canvas优化--模糊问题.旋转效果" 用离屏canvas画基础部分 1.封装画线函数 function drawLine(ctx,x1,y1,x2, ...

  8. html5 canvas 3d屏保 源码

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <met ...

  9. 利用html5的画布canvas进行图片压缩处理

    在网上找的代码,按自己的需求改了下,忘记在哪找的了.这里记着方便自己以后学习. // 参数,最大高度 //var MAX_HEIGHT = 100; var MAX_WIDTH = 200; // 渲 ...

随机推荐

  1. 有语言基础的人应该如何学习python？

    正好最近在学python,感觉有语言基础的话更多在乎一些语法糖,毕竟其他东西在之前应该接触过了. 笔者C++是起始语言,也接触过java.js,介绍一点python的特点吧.帮助自己巩固所学,也希望能 ...

  2. ubuntu16登录后黑屏无法进入系统问题汇总

    今晚在使用虚拟机的过程中发现有些卡顿,顿时想给虚拟机增加内核数,然后,然后,,,我就再也没有看到过图形化界面,在某搜索引擎查找了半天,把我的问题汇总了一下发出来,希望对遇到同样问题的有所帮助. 出现黑 ...

  3. xmind2020 zen 10.3.1安装破解教程

    hi大家好,xmind zen 2020 10.3.1是一款优秀的思维导图工具,我和我爸爸都在用,功能包括去掉xmind zen水印.上传图片等功能,支持windows操作系统! 文章教大家安装并解锁 ...

  4. 本地Git项目搭建和文件操作

    Git项目搭建 git init ---在该文件夹下进入cmd/terminal git clone [url] ---克隆远程仓库到本地 Git文件操作 文件的四种状态: · Untracked:未 ...

  5. DNS服务器（一）正向解析

    一.DNS简介 在日常生活中人们习惯便用域名访问服务器,但机器间互相只认IP地址,域名与1P地址之间是多对一的关系,一个ip地址不一定只对应一个域名,且一个域名只可以对应一个ip地址,它们之间的转换工 ...

  6. Elgamal加密算法和数字签名

    简述:ElGamal公钥密码体制是由 T.ElGamal于 1985年提出的,直到现在仍然是一个安全性能良好的公钥密码体制.该算法既能用于数据加密也能用于数字签名,其安全性依赖于计算有限域上离散对数这 ...

  7. 洛谷P1879题解

    题面 显然是个状压DP. 看数据范围,不难发现算法复杂度应该是 \(O(n\times 2^n \times 2^n)\) . 显然第一个 \(n\) 是遍历每一行的土地. 后面两个 \(2^n\) ...

  8. 最全总结 | 聊聊 Python 数据处理全家桶（PgSQL篇）

    1. 前言 大家好,我是安果! Python 数据处理全家桶,截止到现在,一共写过 6 篇文章,有兴趣的小伙伴可以去了解一下! 最全总结 | 聊聊 Python 数据处理全家桶(Mysql 篇) 最全 ...

  9. RedisTemplate连接不释放、Redis断线不重连问题、Redis连接数高飙升

    使用RedisTemplate操作Redis数据,但遇到网络断线后不会重新连接 毫无头绪 一顿捣鼓 最终解决 整理如下 帮助更多的人 1.起因 使用RedisTemplate 配置 开启了事务 ena ...

  10. Linux虚拟机配置SSH免密登录

    本环境为CentOS 7(点击镜像下载iso文件),无图界面. 启动SSH服务 在/usr/sbin/有一个文件为sshd,然后输入绝对路径/usr/sbin/sshd即可开启ssh服务. 然后输入命 ...