返回顶部

收藏

使用缓冲提高html5 canvas的绘图性能

更多

在winform绘制控件时有双重缓冲的概念,这种理念也可以用在html5的canvas标签中。

对于负责的html5 canvas绘图我们可以通过在页面的同一个位置放置两个canvas标签,其中一个是隐藏的,另一个是显示给用户的。

在需要绘制时绘制到隐藏的canvas上,绘制完毕再切换两个canvas标签的可见性。

如下CSS代码:

canvas { border: 2px solid #000; position:absolute; top:0;left:0; 
visibility: hidden; }

切换的js代码:

Buffers[1-DrawingBuffer].style.visibility='hidden';
Buffers[DrawingBuffer].style.visibility='visible';

DrawingBuffer=1-DrawingBuffer;

在上面的js中Buffers数组中有两个canvas元素,可以根据需要绘制到某一个canvas上。

标签:html5,canvas,css,性能优化,javascript

收藏

0人收藏

支持

1

反对

0

相关聚客文章
  1. 博主 发表 2015-03-19 07:05:18 不用cookie我也能追踪你!
  2. 远行 发表 2016-07-09 14:22:43 WebGL介绍
  3. 博主 发表 2015-06-23 05:43:07 弹幕、抽奖及投票
  4. 歪脖骇客 发表 2014-06-27 02:42:01 Javascript网页截屏的方法
  5. 博主 发表 2016-03-28 12:58:40 弹幕、抽奖及投票
  6. 博主 发表 2015-05-07 07:46:30 弹幕、抽奖及投票
  7. Garris Shipon 发表 2014-09-17 13:09:00 Responsive and Infinitely Scalable JS Animations
  8. Vitali Malinouski 发表 2014-01-22 14:27:14 HTML5 Input Types Alternative
  9. 新一 发表 2015-02-08 01:57:47 HTML5 canvas验证码识别
  10. w3cui 发表 2014-08-20 02:48:23 JavaScript异步编程的模式
  11. Mr.Liu 发表 2012-08-02 08:05:24 12 Oak Inc 前端开发编码规范
  12. 小琪 发表 2013-04-22 09:09:32 HTML5图像处理 (续) – 局部红色

发表评论