최근 업무상 HTML의 Canvas 태그에 대해 알게 되었습니다.
캔버스(Canvas)는 HTML5의 새로운 구성요소로, 자바스크립트를 이용해 다양한 차트, 애니메이션 등을 그릴 수 있는 커튼과 같습니다.
Canvas 이전 시대에는 Flash 플러그인을 통해서만 그림을 그릴 수 있었고 페이지는 JavaScript와 Flash를 사용하여 상호 작용해야 했습니다. Canvas를 사용하면 더 이상 Flash가 필요하지 않으며 JavaScript를 직접 사용하여 그림을 완성할 수 있습니다.
튜토리얼을 보고 hello world를 직접 작성하면서 문제가 시작되었습니다. 아래 코드를 보세요:
<!DOCTYPE html><html lang=en><body><canvas id=canvas1 style=width: 200px;height: 200px; border:1px solid black;></canvas><script> var oC = document.getElementById( 'canvas1'); var ctx = oC.getContext(2d); 0); ctx.lineTo(200, 200);</script></body></html>
위 코드의 의미는 캔버스에 너비와 높이가 각각 200px인 직선을 그리는 것입니다. 직선의 시작점은 (0,0)이고 끝점은 (200,200)입니다.
그러나 브라우저가 그리는 이미지는 다음과 같습니다.
이 사진 좀 보세요~ 왜 이렇게 경사가 있는 걸까요? 그러면 안 돼요~ 대각선이어야 해요~~
나중에 정보를 찾아보니 캔버스 태그의 너비와 높이를 설정할 때 다음과 같은 방법과 결과가 있다는 것을 알게 되었습니다.
Canvas 요소의 기본 너비는 300px이고 높이는 150px입니다. 너비와 높이를 설정하려면 다음 방법을 사용할 수 있습니다.
방법 1:
1 <캔버스 너비=500 높이=500$amp;>amp;$lt;/캔버스>
방법 2: HTML5 Canvas API 작업 사용
1 var canvas = document.getElementById('조작할 캔버스의 id');
2 캔버스.폭 = 500;
3 캔버스.폭 = 500;
다음 방법으로 너비와 높이를 설정하면 Canvas 요소가 원래 크기에서 설정된 너비와 높이로 늘어납니다.
방법 1: CSS를 사용하면
1 #캔버스 ID를 작동하려면{
2 너비:1000px;
3 높이:1000px;
4 ｝
인라인 스타일에는 style=도 포함됩니다. 즉, 위의 예에서는 스트레칭도 발생하게 됩니다.
방법 2: HTML5 Canvas API를 사용하는 작업이 확장됩니다.
1 var canvas = document.getElementById('조작할 캔버스의 id');
2 캔버스.스타일.폭 = 1000px;
3 캔버스.스타일.높이 = 1000px;
방법 3: jquery의 $(#id).width(500)를 사용하면 늘어납니다.
기타: 캔버스의 너비와 높이는 백분율로 표시할 수 없습니다. 캔버스는 백분율을 숫자 값으로 표시합니다.
따라서 위 정보를 통해 위 예제의 코드가 캔버스의 너비와 높이를 늘려 이미지가 예상과 일치하지 않게 되기 때문이라는 것을 알 수 있습니다.
이제 캔버스의 너비와 높이를 올바르게 설정하기 위해 코드 예제를 다시 작성했습니다.
<!DOCTYPE HTML><html><body><canvas id=myCanvas width=200 height=200 style=border:1px solid black;> 브라우저가 캔버스 요소를 지원하지 않습니다.</canvas><script type=text/ javascript> var c = document.getElementById(myCanvas); var cxt = c.getContext(2d); cxt.lineTo(200, 200); cxt.Stroke();</script></body></html>
결과:
마치다.
요약위의 내용은 이 기사의 전체 내용입니다. 이 기사의 내용이 모든 사람의 학습이나 업무에 특정 참고 가치가 있기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨주세요. VeVb Wulin의 지원에 감사드립니다. 회로망.