离屏操作:
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. 【洛谷P2623物品选取】动态规划

    分析 各种背包弄在一起. AC代码 // luogu-judger-enable-o2 #include <bits/stdc++.h> using namespace std; #def ...

  2. 静态Web服务器(py版)

    近来,对http协议进行了研究,闲来无事.自己使用python3写了个静态Web服务器,以下是代码: static_Web_sever.py ''' 思路:首先使用socket创建tcp服务器,照旧绑 ...

  3. xmind2020 zen 10.2.1win/mac/linux安装教程

    xmind是一款优秀的思维导图软件,本文教大家如何安装xmind zen 2020 10.2.1版本,解锁使用全部功能,包括去掉xmind zen水印.上传图片等功能,支持windows/mac/li ...

  4. fastjson 1.2.24 反序列化导致任意命令执行漏洞

    漏洞检测 区分 Fastjson 和 Jackson {"name":"S","age":21} 和 {"name":& ...

  5. Session与Cookie的原理以及使用小案例>从零开始学JAVA系列

    目录 Session与Cookie的原理以及使用小案例 Cookie和Session所解决的问题 Session与Cookie的原理 Cookie的原理 Cookie的失效时机 小提示 Session ...

  6. C++利用模板在Windows上快速调用DLL函数

    更新日志 --------- 2021/08/01 更新V2.2 增加 GetHmodule 函数 - 允许用户获取HMODULE以验证加载DLL是否成功. 2021/08/03 更新V2.3 增加 ...

  7. Android菜鸟进字节跳动,居然是看了这个......

    谈谈我的真实感受吧- 程序员真的是需要将终生学习贯彻到底的职业,一旦停止学习,离被淘汰,也就不远了. 金三银四.金九银十跳槽季,这是一个千年不变的话题,每到这个时候,很多人都会临阵磨枪,相信不快也光. ...

  8. 两万字长文,彻底搞懂Kafka!

    1.为什么有消息系统 1.解耦合 2.异步处理 例如电商平台,秒杀活动. 一般流程会分为: 风险控制 库存锁定 生成订单 短信通知 更新数据 通过消息系统将秒杀活动业务拆分开,将不急需处理的业务放在后 ...

  9. webservice接口调用

    package com.montnets.emp.sysuser.biz; import org.apache.axis.client.Call; import org.apache.axis.cli ...

  10. [C++]-unordered_map 映射

    unordered_map和map的区别请点击这里. 本文中的代码跟[C++]-map 映射中的代码仅仅是把定义的map类型数据定义成了unordered_map类型数据. 代码 #include&l ...