HTML5 캔버스

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

캔버스란 무엇인가요?

HTML5

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

기본적으로 IE8 및 이전 버전을 제외한 모든 브라우저는

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

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, 투명도)

캔버스 사용 직선 그리기:

    php.cn

캔버스 좌표

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

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

참고:여기에서는 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) - 방사형/원형 그라데이션 만들기

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

캔버스 - 텍스트

text: 그려질 텍스트

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

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

context.font: 글꼴 스타일 설정

context.textAlign: 가로 정렬