离屏操作：

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. DNS Bind日志详述

    简介 在默认情况下,BIND9 把日志消息写到 /var/log/messages 文件中,而这些日志消息是非常少的,主要就是启动,关闭的日志记录和一些严重错误的消息:而将调试日志信息写入 BIND ...

  2. 01_什么是BS结构，什么是CS结构？

    C/S和B/S都是互联网中常见的网络结构模型. 一.什么是C/S模型? C是英文单词"Client"的首字母,即客户端的意思,C/S就是"Client/Server&qu ...

  3. PGSQL存储过程学习

    一.存储过程定义:   存储过程(Stored Procedure)是在大型数据库系统中,一组为了完成特定功能的SQL 语句集,它存储在数据库中,一次编译后永久有效,用户通过指定存储过程的名字并给出参 ...

  4. 华为高斯DB(for MySQL)搭建演示

    产品架构 云数据库 GaussDB(for MySQL)整体架构自下向上分为三层. 存储层: 基于华为DFV存储,提供分布式.强一致和高性能的存储能力,此层来保障数据的可靠性以及横向扩展能力. 存储抽 ...

  5. 【LeetCode】34. 在排序数组中查找元素的第一个和最后一个位置

    34. 在排序数组中查找元素的第一个和最后一个位置 知识点:数组,二分查找: 题目描述 给定一个按照升序排列的整数数组 nums,和一个目标值 target.找出给定目标值在数组中的开始位置和结束位置 ...

  6. Linux 基础指令初识

    Linux 基础指令初识 01. ls 指令 语法: ls [选项] [目录或文件] 功能:对于目录,该命令列出该目录下的所有子目录与文件.对于文件,将列出文件名以及其他信息 -a 列出目录下的所有文 ...

  7. SQL遍历日期

    IF OBJECT_ID(N'tempdb..#temp', N'U') IS NOT NULL BEGIN DROP TABLE #temp;--临时表删除 END --创建临时表 CREATE T ...

  8. SQL Server存储过程执行一个带返回值(output)的存储过程

    语法如下: --存储过程一CREATE PROCEDURE testProc @out VARCHAR(500) OUTPUT AS BEGIN SET @out='操作成功' RETURNEND - ...

  9. js--class类、super和estends关键词的学习笔记

    前言 JavaScript 语言在ES6中引入了 class 这一个关键字,在学习面试的中,经常会遇到面试官问到谈一下你对 ES6 中class的认识,同时我们的代码中如何去使用这个关键字,使用这个关 ...

  10. rancher v1.6.29部署K8s

    1. 前提:上一文中,已部署好单节点Rancher v1.6.29 2. 在Rancher中,添加环境模板 修改k8s设置参数 参数修改明细: Private Registry for Add-Ons ...