html5-canvas 创建响应式全页画布

  • Z时代
  • 2024-01-10
  • 分类：综合

示例

入门代码，用于创建和删除整页画布，该画布通过javascript响应调整大小事件。

var canvas;    // 全局画布参考
var ctx;       // 全局2D上下文参考
// 创建一个画布
function createCanvas () {                
    const canvas = document.createElement("canvas"); 
    canvas.style.position = "absolute"; // 设定风格 
    canvas.style.left     = "0px";      // 位置在左上方
    canvas.style.top      = "0px";
    canvas.style.zIndex   = 1;        
    document.body.appendChild(canvas);  // 新增至文件
    return canvas;
}
//调整画布大小。如果不存在，将创建一个画布
function sizeCanvas () {                
    if (canvas === undefined) {         // 检查全局画布参考
        canvas = createCanvas();        // 创建一个新的canvas元素
        ctx = canvas.getContext("2d");  // 获取2D上下文
    }
   canvas.width = innerWidth;         // 设置画布分辨率以填充页面
   canvas.height= innerHeight;        
}
// 删除画布
function removeCanvas () {
    if (canvas !== undefined) {              // 确保有东西要去除
        removeEventListener("resize", sizeCanvas); // 删除大小调整事件
        document.body.removeChild(canvas);   // 从DOM中删除画布
        ctx = undefined;                     // 取消引用上下文
        canvas = undefined;                  // 取消引用画​​布
     }
}
// 添加调整大小的侦听器
addEventListener("resize", sizeCanvas); 
// 调用sizeCanvas创建和设置画布分辨率
sizeCanvas();
// 现在可以使用ctx和canvas。

如果您不再需要画布，可以通过调用将其删除 removeCanvas()

jsfiddle上的此示例演示

以上是 html5-canvas 创建响应式全页画布 的全部内容， 来源链接： utcz.com/z/337879.html

回到顶部