Canvas全屏JS - Javascript

Canvas是HTML5中的一个重要特性，可以让开发者使用Javascript在网页上绘制图形。而全屏模式对于很多web应用来说也是一个很重要的需求。本文将介绍如何使用Javascript开发一个Canvas全屏应用。

1. 获取画布

首先我们需要获取到Canvas对象，可以使用DOM API createElement()获取到一个canvas元素，并设置其属性。

let canvas = document.createElement('canvas');
canvas.setAttribute('id', 'canvas');
canvas.style.position = 'fixed';
canvas.style.top = 0;
canvas.style.left = 0;
canvas.style.zIndex = -1;
document.body.appendChild(canvas);

2. 调整画布大小

接下来我们需要调整画布的大小，使其占据整个屏幕。我们可以添加一个resize事件监听器，在画布被调整大小时更新画布的尺寸。

function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}
window.onresize = resize;
resize();

3. 绘制图形

我们可以使用Canvas API绘制各种形状和纹理，这里以绘制简单的填充圆形为例。

let context = canvas.getContext('2d');
context.beginPath();
context.arc(canvas.width / 2, canvas.height / 2, 100, 0, Math.PI * 2);
context.fillStyle = 'blue';
context.fill();

4. 全屏适配

为了让画布能够自动适应不同的屏幕，我们需要为Canvas添加一些CSS属性。

#canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

5. 完整代码

let canvas = document.createElement('canvas');
canvas.setAttribute('id', 'canvas');
canvas.style.position = 'fixed';
canvas.style.top = 0;
canvas.style.left = 0;
canvas.style.zIndex = -1;

function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}
window.onresize = resize;
resize();

let context = canvas.getContext('2d');
context.beginPath();
context.arc(canvas.width / 2, canvas.height / 2, 100, 0, Math.PI * 2);
context.fillStyle = 'blue';
context.fill();

document.body.appendChild(canvas);

#canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

以上就是使用Javascript开发一个Canvas全屏应用的全部步骤，希望对你有所帮助。