HTML5 캔버스에 대한 자세한 설명(1)
- 黄舟원래의
- 2017-03-17 15:32:423117검색
HTML5의 캔버스 요소는 웹 페이지에 그래픽을 그리는 데 사용됩니다.
캔버스 기능
캔버스 캔버스는 직사각형 영역으로 각 픽셀을 제어할 수 있습니다.
캔버스는 JavaScript를 사용합니다. 그리기 제어
캔버스에는 선, 직사각형, 원 및 이미지 추가 방법이 있습니다
캔버스 태그 사용
다음 코드는 캔버스 화면을 사용하여 200*200 빨간색 직사각형을 그리는 것입니다.
<!Doctype html>
<html>
<head>
<title>我的canvas页面</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="200" height="200">
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,200,200);
</script>
</body>
</html> 위 코드를 canvas.html로 저장하고 인코딩을 utf-8로 설정합니다(그렇지 않으면 중국어로 왜곡된 코드). 브라우저로 열면 다음 효과를 볼 수 있습니다. 
<canvas id="myCanvas" width="200" style="max-width:90%">
여기는 Canvas 태그를 생성하고 해당 ID를 JavaScript에 편리한 myCanvas로 정의합니다그림을 그릴 때 태그를 얻으려면 객체.
JavaScript 그리기 부분을 다시 살펴보세요.
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,200,200);첫 번째 문장인 getElementById는 Canvas 태그의 ID를 통해 캔버스 개체를 가져옵니다.
두 번째 문장인 getContext는 컨텍스트 개체를 가져옵니다.
세 번째 문장은 Context 객체의 fillStyle 메소드를 호출합니다. 즉, 색상을 채웁니다.
네 번째 문장에서는 Context 객체의 fillRect 메서드를 호출하여 채워진 영역을 지정합니다.
캔버스의 다른 인스턴스
직선
<!Doctype html><html><head><title>我的canvas页面</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="200" height="200">
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();</script></body></html>실행 결과는 다음과 같습니다. 
원
<!Doctype html>
<html>
<head>
<title>我的canvas页面</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="200" height="200">
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();</script></body></html>실행 결과는 다음과 같습니다. 
Gradient
<!Doctype html><html><head><title>我的canvas页面</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="200" height="200">
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
</body>
</html>효과는 다음과 같습니다. 
이미지
<!Doctype html>
<html>
<head>
<title>我的canvas页面</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="800" height="600">
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image();
img.src="1.png";
img.onload=function(e){
cxt.drawImage(img,0,0);
}
cxt.drawImage(img,0,0);
</script>
</body>
</html>참고로 Img에 onload 이벤트 를 추가하세요. 그렇지 않으면 이미지가 표시되지 않습니다.
그 중에 제가 찾은 그림자료는 1.png 입니다. 페이지를 열면 캔버스에 이미지가 표시되는 것을 볼 수 있습니다. 제 런닝 효과는 이렇습니다 바이두에서 무작위로 찾은 사진이니 한번 보세요~~ 
위 내용은 HTML5 캔버스에 대한 자세한 설명(1)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!