HTML5 캔버스

<canvas></canvas>는 HTML5에 나타나는 새로운 태그입니다. 모든 DOM 개체와 마찬가지로 자체 속성, 메서드 및 이벤트가 있으며 그중에는 js가 그리기를 위해 호출할 수 있습니다. .

캔버스란 무엇인가요?

HTML5 <canvas> 요소는 스크립트(일반적으로 JavaScript)를 통해 수행되는 그래픽을 그리는 데 사용됩니다. 그래픽 컨테이너만 사용하려면 스크립트를 사용하여 그래픽을 그려야 합니다.

Canva를 사용하면 경로, 상자, 원, 문자를 그리고 다양한 방법으로 이미지를 추가할 수 있습니다.

기본적으로 IE8 및 이전 버전을 제외한 모든 브라우저는 <canvas> 요소를 지원합니다.

캔버스 요소를 사용하여 이미지를 그리는 방법에는 두 가지가 있습니다.

context.fill()//채우기

context.Stroke()//테두리 그리기

style: 그래픽을 그리기 전에 그리기 스타일

context.fillStyle//Fill style

스트로크 스타일//테두리 스타일<을 설정합니다. 🎜>

context.lineWidth//그래픽 테두리 너비

색상 표현:

사용 색상 이름 직접: "red" "green" "blue"

16진수 색상 값: "#EEEEFF"

rgb(1-255, 1-255,1-255)

rgba(1-255,1-255,1-255, 투명도)

캔버스 사용 직선 그리기:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>php.cn</title>
    </head>
    <style type="text/css">
        canvas{border:dashed 2px #CCC}
    </style>
    <script type="text/javascript">
        function $$(id){
            return document.getElementById(id);
        }
        function pageLoad(){
            var can = $$('can');
            var cans = can.getContext('2d');
            cans.moveTo(20,30);//第一个起点
            cans.lineTo(120,90);//第二个点
            cans.lineTo(220,60);//第三个点（以第二个点为起点）
            cans.lineWidth=3;
            cans.strokeStyle = 'red';
            cans.stroke();
        }
    </script>
    <body onload="pageLoad();">
        <canvas id="can" width="400px" height="300px">4</canvas>
    </body>
</html>

캔버스 좌표

캔버스는 2차원 격자입니다.

캔버스의 왼쪽 상단 좌표는 (0,0)

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <style type="text/css">
        canvas{border:dashed 2px #CCC}
    </style>
    <script type="text/javascript">
        function $$(id){
            return document.getElementById(id);
        }
        function pageLoad(){
            var can = $$('can');
            var cans = can.getContext('2d');
            cans.fillStyle = 'yellow';
            cans.fillRect(30,30,340,240);
        }
    </script>
    <body onload="pageLoad();">
        <canvas id="can" width="400px" height="300px">4</canvas>
    </body>
</html>

참고: 여기에서는 fillRect() 메소드가 사용됩니다. 문자 그대로의 의미로 보면 이것이 직사각형을 채우는 것임을 알 수 있습니다. 여기의 매개변수는 fillRect(X,Y)를 설명할 가치가 있습니다. ,Width,Height) , 이는 수학의 좌표와 다릅니다. 여기서 X와 Y는 캔버스의 왼쪽 상단을 기준으로 하는 시작점에서 시작됩니다. !

둥근

으으으

참고: 여기서 호 방법의 사용법은 arc(X,Y,Radius,startAngle,endAngle,anticlockwise)입니다. 이는 (원 중심의 X 좌표, 원 중심의 Y 좌표, 반경, 시작 각도)를 의미합니다. (라디안), 종료 각도 라디안, 그리기 기준 여부 시계 방향)

캔버스 - 그라데이션

그라디언트는 직사각형, 원, 선, 텍스트 등을 채울 수 있으며, 다양한 모양은 자체적으로 정의된 서로 다른 색상을 가질 수 있습니다.

캔버스 그라데이션을 설정하는 방법에는 두 가지가 있습니다.

createLinearGradient(x,y,x1,y1) - 선 그라데이션 만들기

createRadialGradient(x,y, r,x1,y1,r1) - 방사형/원형 그라데이션 만들기

그라디언트 개체를 사용할 때는 두 개 이상의 정지 색상을 사용해야 합니다. <… 그런 다음 직사각형, 텍스트 또는 선과 같은 모양을 그립니다.

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <style type="text/css">
        canvas{border:dashed 2px #CCC}
    </style>
    <script type="text/javascript">
        function $$(id){
            return document.getElementById(id);
        }
        function pageLoad(){
            var can = $$('can');
            var cans = can.getContext('2d');
            cans.beginPath();
            cans.arc(200,150,100,0,Math.PI*2,false);
            cans.closePath();
            cans.lineWidth = 5;
            cans.strokeStyle = 'red';
            cans.stroke();
        }
    </script>
    <body onload="pageLoad();">
        <canvas id="can" width="400px" height="300px">4</canvas>
    </body>
</html>

캔버스 - 텍스트

text: 그려질 텍스트

x: 텍스트 시작점의 x 좌표축

y : 텍스트 시작점의 y좌표축

context.font: 글꼴 스타일 설정

context.textAlign: 가로 정렬

시작, 끝, 오른쪽, 가운데

context.textBaseline: 세로 정렬

위쪽, 내어쓰기, 중간, 알파벳, 표의 문자、 밑

아아아아

지속적인 학습

새로운 파일

<!doctype html> <html> <head> <meta charset="UTF-8"> </head> <style type="text/css"> canvas{border:dashed 2px #CCC} </style> <script type="text/javascript"> function $$(id){ return document.getElementById(id); } function pageLoad(){ var can = $$('can'); var cans = can.getContext('2d'); cans.moveTo(0,0); cans.lineTo(400,300); var gnt1 = cans.createLinearGradient(0,0,400,300);//线性渐变的起止坐标 gnt1.addColorStop(0,'red');//创建渐变的开始颜色，0表示偏移量，个人理解为直线上的相对位置，最大为1，一个渐变中可以写任意个渐变颜色 gnt1.addColorStop(1,'yellow'); cans.lineWidth=3; cans.strokeStyle = gnt1; cans.stroke(); } </script> <body onload="pageLoad();"> <canvas id="can" width="400px" height="300px">4</canvas> </body> </html>

제출하다 코드 재설정

자동운전