HTML5 캔버스의 너비와 높이가
- 黄舟원래의
- 2017-03-21 16:06:021534검색
예전에는 캔버스를 사용하여 그림을 그릴 때 항상 캔버스 태그에 너비와 높이를 직접 적어서 문제가 없었지만 왜 너비와 높이를 지정해야 하는지 탐구한 적이 없습니다. 각 데이터가 예제에 쓰여 있기 때문에 캔버스 태그에 직접 작성해야 합니다. 오늘 Sir Wang은 질문을 던졌습니다. 너비와 높이를 c9ccee2e6ea535a969eb3f532ad9fe89로 쓰면 어떤 차이가 있는지 살펴보겠습니다. 나는 다음을 직접 시도했지만 확실히 문제가 있습니다.
먼저 코드를 살펴보겠습니다:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
<meta name="Keywords" content="">
<meta name="author" content="@my_programmer">
<style type="text/css">
body{margin:0;}
canvas{margin:20px;
/*width: 400px;
height: 300px;*/
}
</style>
</head>
<body onload="draw()">
<canvas id="canvas" width=400 height=300 style="border:1px solid #f00;"></canvas>
<script>
function draw() {
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.beginPath();
context.moveTo(20,20);
context.lineTo(200,100);
context.lineWidth=5;
context.stroke();
}
</script>
</body>
</html>1. 너비: 400; 높이: 300 50deac90c8f74b69391c9996b22bd408에 직접 쓰는 효과:
2. 5ba626b379994d53f7acf72a64f9b697에서 너비와 높이를 삭제합니다. 너비: 400; 높이: 300 c9ccee2e6ea535a969eb3f532ad9fe89에 쓰기 효과:
왜 둘의 효과가 다를까요?
캔버스도 다른 태그와 마찬가지로 CSS를 통해 스타일을 지정할 수 있습니다. 하지만 여기서 주목해야 할 점은 캔버스의 기본 너비와 높이가 300px * 150px이라는 것입니다. CSS에서 캔버스의 너비와 높이를 정의하세요. 실제로 300px * 150px의 캔버스는 늘어납니다. 이러한 상황에서 캔버스그리기를 수행하면 얻을 수 있는 그래픽이 변형될 수 있습니다. 따라서 캔버스에 그림을 그릴 때 는 캔버스 태그에 너비와 높이를 직접 정의해야 합니다.
위 내용은 HTML5 캔버스의 너비와 높이가
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.