js设置canvas的宽高

在JavaScript中设置Canvas元素的宽和高，可以通过以下几种方式进行：

基础概念

Canvas是HTML5中引入的一个元素，用于在网页上绘制图形。它提供了一个可以通过JavaScript脚本来绘制图形的区域。

设置宽高的方法

通过HTML属性设置：在HTML中直接设置width和height属性。
通过HTML属性设置：在HTML中直接设置width和height属性。
通过CSS样式设置：使用CSS来设置Canvas的大小，但这通常会影响绘图的分辨率。
通过CSS样式设置：使用CSS来设置Canvas的大小，但这通常会影响绘图的分辨率。
通过JavaScript设置：使用JavaScript动态设置Canvas的宽和高。
通过JavaScript设置：使用JavaScript动态设置Canvas的宽和高。

优势与应用场景

灵活性：通过JavaScript设置可以在运行时动态调整大小，适应不同的屏幕和设备。
性能优化：直接设置宽高属性可以避免CSS缩放带来的性能损失和模糊问题。

遇到的问题及解决方法

问题：通过CSS设置宽高导致的模糊问题

当通过CSS设置Canvas大小时，可能会导致绘制的图形出现模糊，因为CSS的缩放可能会改变像素比。

解决方法：确保Canvas的实际宽高与CSS设置的宽高一致，或者使用JavaScript来设置宽高，并考虑设备的像素比。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 设置实际宽高
canvas.width = 800;
canvas.height = 600;

// 考虑设备像素比
var dpr = window.devicePixelRatio || 1;
canvas.style.width = (canvas.width / dpr) + 'px';
canvas.style.height = (canvas.height / dpr) + 'px';

// 缩放画布上下文
ctx.scale(dpr, dpr);

示例代码

以下是一个完整的示例，展示了如何使用JavaScript设置Canvas的宽高，并考虑设备像素比以避免模糊：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas Width and Height</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // 设置实际宽高
        var width = 800;
        var height = 600;
        canvas.width = width;
        canvas.height = height;

        // 考虑设备像素比
        var dpr = window.devicePixelRatio || 1;
        canvas.style.width = (width / dpr) + 'px';
        canvas.style.height = (height / dpr) + 'px';

        // 缩放画布上下文
        ctx.scale(dpr, dpr);

        // 绘制一个简单的矩形
        ctx.fillStyle = 'blue';
        ctx.fillRect(0, 0, 100, 100);
    </script>
</body>
</html>

通过这种方式，可以确保Canvas在不同设备上都能保持清晰，并且能够灵活地调整大小以适应不同的显示需求。