Canvas 缓冲/离屏渲染

如果发现每一帧里有好多复杂的画图运算,那么考虑创建一个离屏 canvas,将图像在这个画布上画一次(或者每当图像改变的时候画一次),然后在每帧上画出视线以外的这个画布

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="300" height="100">
</canvas>
<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");

var buffer_c = document.createElement("canvas");
buffer_c.width = c.width;
buffer_.height = c.height;
var buffer = buffer_c.getContext("2d");

buffer.fillStyle="green"
buffer.fillRect(10,10,100,50);


ctx.drawImage(buffer,0,0);
</script>

运行结果如下



Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.