이 코드에서 캔버스가 작동하려면 너비를 400px로, 높이를 200px로 설정해야합니다. 왜 이런 일이 일어나는지 아는 사람이 있습니까? 또한 중요한 경우 Windows 10 컴퓨터를 사용하고 있지만 Stack Overflow에서 코드를 실행하면 여전히 이런 식으로 나옵니다.
400 :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var a = document.getElementById("3d");
var b = a.getContext("2d");
b.beginPath();
b.moveTo(0,50);
b.lineTo(0,100);
b.lineTo(50,150);
b.lineTo(50,100);
b.lineTo(0,50);
b.lineTo(50,0);
b.lineTo(100,50);
b.lineTo(100,100);
b.lineTo(50,150);
b.lineTo(50,100);
b.lineTo(100,50);
b.stroke();
});
</script>
</head>
<body>
<canvas id="3d" style="width:400px;height:200px;border:1px solid black"></canvas>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var a = document.getElementById("3d");
var b = a.getContext("2d");
b.beginPath();
b.moveTo(0,50);
b.lineTo(0,100);
b.lineTo(50,150);
b.lineTo(50,100);
b.lineTo(0,50);
b.lineTo(50,0);
b.lineTo(100,50);
b.lineTo(100,100);
b.lineTo(50,150);
b.lineTo(50,100);
b.lineTo(100,50);
b.stroke();
});
</script>
</head>
<body>
<canvas id="3d" style="width:200px;height:200px;border:1px solid black"></canvas>
</body>
</html>는 style=정의 스케일링 사용 - width=및 height=상자의 크기를 설정합니다.
여기 에서도 설명 합니다 (MDN 캔버스 요소) .
캔버스의 표시 크기는 CSS를 사용하여 변경할 수 있지만 이렇게하면 스타일이 지정된 크기에 맞게 렌더링하는 동안 이미지 크기가 조정되어 최종 그래픽 렌더링이 왜곡 될 수 있습니다.
HTML에서 직접 또는 JavaScript를 사용하여 요소에 직접 너비 및 높이 속성을 설정하여 캔버스 크기를 지정하는 것이 좋습니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var a = document.getElementById("3d");
var b = a.getContext("2d");
b.beginPath();
b.moveTo(0,50);
b.lineTo(0,100);
b.lineTo(50,150);
b.lineTo(50,100);
b.lineTo(0,50);
b.lineTo(50,0);
b.lineTo(100,50);
b.lineTo(100,100);
b.lineTo(50,150);
b.lineTo(50,100);
b.lineTo(100,50);
b.stroke();
});
</script>
</head>
<body>
<canvas id="3d" width="200" height="200" style="border:1px solid black"></canvas>
</body>
</html>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다