캔버스에 그려진 이미지가 흐릿해지는 문제를 해결하는 방법은 무엇입니까?

Canvas는 HTML5의 새로운 태그로 그래픽을 그릴 수 있는 캔버스입니다. 기본 크기는 300x150입니다. 그리기 캔버스의 크기를 사용자 정의할 때, 즉 스타일을 사용하여 높이와 너비를 설정할 때 주의할 점이 있습니다. 예를 들어

    <div style="width:1000px; height: 600px; " id="canvas_size">
        <canvas id="canvas" style="width: 100%; height: 100%; background-color: #eee">您的浏览器不支持H5画布属性</canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.arc(120, 75, 20, 0, Math.PI * 2, false);
        ctx.fillStyle = "#000";
        ctx.fill();
    </script>
</div>

는 캔버스 전체를 늘리는 것과 동일하므로 그려진 그래픽이 흐려집니다.

원의 가장자리가 흐려지고 타원으로 변한거 보이시죠? 이는 캔버스가 여전히 기본 크기인 너비 300px, 높이 150px이지만 스타일을 사용하여 캔버스를 강제로 1000x600으로 늘이기 때문입니다. 너비가 3.33배, 높이가 4배 늘어나 타원이 됩니다. 너비를 1200으로 변경하면 둥글게 됩니다.

그래서 스타일에서는 크기를 설정할 수 없습니다. 높이를 설정하려면 캔버스의 너비 및 높이 속성을 사용해야 합니다. 아래 코드를 보세요.

원을 그리는 매개변수도 변경되었으니 참고하세요

<div style="width:1000px; height: 600px; " id="canvas_size">
    <canvas id="canvas" width="1000px" height="600px" style="background-color: #eee">您的浏览器不支持H5画布属性</canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.arc(500, 300, 200, 0, Math.PI * 2, false);
        ctx.fillStyle = "#000";
        ctx.fill();

    </script>
</div>

캔버스의 크기를 설정하려면 캔버스와 함께 제공되는 너비 및 높이 속성을 사용하세요. 이는 캔버스의 실제 크기입니다. 온라인으로 해결하는 방법이 있는데 저는 거기까지 가보지는 못했습니다. 더 귀찮을 것 같으니 이제부터는 그냥 고정된 크기로 주는게 낫습니다. 어떤 사람들은 이렇게 사용자 정의하는 방법이 쉽다고 말합니다. div를 넣고 js에서 너비를 가져오거나 화면의 너비와 높이를 가져오고 캔버스의 값을 설정하면 됩니다. 코드는 다음과 같습니다.

<div style="width:1000px; height: 600px; " id="canvas_size"><canvas id="canvas" style="background-color: #eee">您的浏览器不支持H5画布属性</canvas>        <script type="text/javascript">var canvas = document.getElementById("canvas");var canvas_size = document.getElementById("canvas_size");//获取divvar ctx = canvas.getContext("2d");canvas.width = canvas_size.offsetWidth;//设置宽canvas.height = canvas_size.offsetHeight;//设置高ctx.arc(500, 300, 200, 0, Math.PI * 2, false);ctx.fillStyle = "#000";ctx.fill();</script>    </div>

결과는 위 사진과 같으니 직접 해보셔도 됩니다.

요약

캔버스의 너비와 높이는 자체 너비와 높이로 작성해야 실제 캔버스 크기가 됩니다.

<span style="font-size: 16px;"><canvas width="1000px" height="600px" 스타일 =" background-color: #eee">브라우저가 H5 캔버스 속성</canvas></span><span style="font-size: 16px;"><canvas width="1000px" height="600px" style="background-color: #eee">您的浏览器不支持H5画布属性</canvas></span>을 지원하지 않습니다. js를 사용하여 적응적으로 설정하세요.

위 내용은 캔버스에 그려진 이미지가 흐릿해지는 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!