canvas双重缓冲

这个人居然也是码农

已于 2025-02-27 19:32:22 修改

阅读量251

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 javascript html

于 2025-02-27 19:30:48 首次发布

本文链接：https://blog.csdn.net/lt187224/article/details/132897637

let cvs = document.getElementById("cvs");        //获取原始画布

let ctx = cvs.getContext('2d');

/* 创建双缓所需画布 */
let createCtx, createCvs;
(function () {
//创建临时画布
createCvs = document.createElement('canvas');

createCtx = createCvs.getContext('2d');

//设置临时画布大小
createCvs.width = 800;
createCvs.height = 600;
})();
function doubleSlow(theCanvas) {
let pen = theCanvas.getContext("2d");
pen.clearRect(0, 0, theCanvas.width, theCanvas.height);

// 双缓冲绘制 先画到临时 canvas
createCtx.save();
createCtx.beginPath();
array[i].draw(createCtx);
createCtx.restore();
// 再转到正式 canvas
pen.save();
pen.drawImage(createCvs, 0, 0, createCvs.width, createCvs.height);
pen.restore();

// 删除缓冲内容后 再清除缓冲
createCtx.clearRect(0, 0, createCvs.width, createCvs.height);
}