canvas设置一个自适应大小的画布

为了让canvas画布自适应大小，可以使用以下两种方法：

1.使用CSS样式表设置canvas的宽度和高度为100%，这样canvas就会自适应其父元素的大小。然后使用JavaScript获取canvas元素的宽度和高度，再将其设置为canvas的实际大小。最后在canvas中绘制图形即可。

<style>
    canvas {
        width: 100%;
        height: 100%;
    }
</style>

<canvas id="myCanvas"></canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var width = canvas.offsetWidth;
    var height = canvas.offsetHeight;
    canvas.width = width;
    canvas.height = height;
    // 在canvas中绘制图形
</script>

2.使用window对象的resize事件监听器，当窗口大小改变时，重新设置canvas的大小。然后在canvas中绘制图形即可。

<canvas id="myCanvas"></canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        // 在canvas中绘制图形
    }

    window.addEventListener('resize', resizeCanvas, false);
    resizeCanvas();
</script>