HTML5 캔버스에 대한 자세한 설명(1)-H5 튜토리얼-php.cn

캔버스 기능

캔버스 태그 사용

캔버스의 다른 인스턴스

직선

원

Gradient

이미지

집

웹 프론트엔드

H5 튜토리얼

HTML5 캔버스에 대한 자세한 설명(1)

黄舟

Mar 17, 2017 pm 03:32 PM

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로 설정합니다(그렇지 않으면 중국어로 왜곡된 코드). 브라우저로 열면 다음 효과를 볼 수 있습니다.
HTML5 캔버스에 대한 자세한 설명(1)

<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>

로그인 후 복사

실행 결과는 다음과 같습니다.
HTML5 캔버스에 대한 자세한 설명(1)

원

<!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>

로그인 후 복사

실행 결과는 다음과 같습니다.
HTML5 캔버스에 대한 자세한 설명(1)

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>

로그인 후 복사

효과는 다음과 같습니다.
HTML5 캔버스에 대한 자세한 설명(1)

이미지

<!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)