html5-canvas 创建响应式全页画布
示例
入门代码，用于创建和删除整页画布，该画布通过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上的此示例演示