HTML5 캔버스
이러한 차트 및 기타 이미지와 같은 <캔버스> 태그 사용자 정의 그래픽, 당신은 그래픽을 그리는 스크립트를 사용해야합니다.
캔버스에서 (캔버스) 빨간색 사각형, 그라데이션 사각형, 색 사각형, 어떤 색깔의 텍스트를 그립니다.
캔버스는 무엇인가?
HTML5 <캔버스> 요소를 완료하는 스크립트 (보통 JavaScript)를 사용하여 그래픽을 그리는 데 사용됩니다.
<캔버스> 태그는 그래픽 컨테이너, 당신은 그래픽을 그리는 스크립트를 사용해야합니다.
당신은 칸바는 다양한 방법을 통해 경로, 상자, 원, 문자 및 추가 이미지를 그릴 수 있습니다.
브라우저 지원
인터넷 익스플로러 9 이상, 파이어 폭스, 오페라, 크롬, 사파리 지원 <캔버스> 요소입니다.
참고 : 인터넷 익스플로러 8과 IE 브라우저의 이전 버전의 <캔버스> 요소를 지원하지 않습니다.
캔버스 만들기 (캔버스)
캔버스 페이지는 사각형이 <캔버스> 요소를 통해 그려입니다.
참고 : 기본적으로 <캔버스> 요소는 테두리와 내용이 없습니다.
다음과 같이 <캔버스> 간단한 예는 다음과 같습니다
주 : 라벨은 일반적으로 id 속성을 (스크립트가 자주 인용) 지정해야합니다, 크기, 폭과 높이 속성은 캔버스을 정의합니다.
팁 : HTML 페이지에 여러 <캔버스> 요소를 사용할 수 있습니다.
테두리를 추가 할 스타일 속성을 사용 :
그래픽을 그릴 자바 스크립트를 사용하여
캔버스 요소 자체는 전원을 공급하지 않습니다. 자바 스크립트로 그려야합니다 모든 작업은 내부적으로 수행 :
예
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
»시도
분석의 예 :
먼저, <캔버스> 요소를 찾을 수 있습니다 :
그런 다음, 컨텍스트 객체를 생성 :
후에야 getContext는 ( "2 차원") 목적은 내장 HTML5 객체 그리기 경로, 상자, 원, 문자 및 추가 이미지를위한 여러 가지 방법이 있습니다.
다음 두 줄의 코드는 빨간색 사각형을 그릴 :
ctx.fillRect(0,0,150,75);
FillStyle 등록 정보를 설정하면 CSS 색상, 그라디언트 또는 패턴이 될 수 있습니다. fillStyle에서는 기본 설정은 # 000000 (검정)입니다.
fillRect 할은 (여기서 x는 y는, 폭,높이) 메소드는, 현재의 방법으로 채워진 사각형을 정의합니다.
캔버스 좌표
캔버스는 2 차원 메쉬이다.
캔버스 왼쪽 상단의 좌표 (0,0)
위의 방법은 (0,0,150,75) fillRect 할 매개 변수가 있습니다.
이는 : 왼쪽 상단 (0,0)에서 캔버스에 150x75 사각형을 그립니다.
좌표의 예
아래 그림과 같이, X와 Y는 그림의 위치에 대한 캔버스에 캔버스의 좌표. 마우스 이동 사각형은, 표시 위치를 조정합니다.
캔버스 - 경로
캔버스 페인팅 라인에서, 우리는 다음 두 가지 방법을 사용합니다 :
- 의 moveTo는(여기서 x는, y)는 시작하는 라인을 정의하는 좌표
- 에 lineTo은(X는, y)는 라인의 끝을 정의하는 좌표
뇌졸중처럼, 우리는 "잉크"방법을 사용합니다 선을 그립니다 ().
예
선을 그리는 스트로크 () 메소드를 사용해서 좌표 (0,0) 및 최종 좌표 (200, 100)를 시작하고 정의합니다 :
자바 스크립트 :
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
»시도
캔버스에 원을 그려, 우리는 다음과 같은 방법을 사용합니다 :
- 아크 (X, Y, R, 시작, 중지)
예 () 또는 채우기 () 스트로크로, 원을 그릴 때 사실, 우리는 "잉크"접근 방식을 사용했다.
예
원을 그리는 원호 () 메소드를 사용하여
자바 스크립트 :
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
»시도
캔버스 - 텍스트
다음과 같이 텍스트, 중요한 속성과 메서드를 그리는 캔버스를 사용하여
- 글꼴 - 글꼴을 정의
- fillText (텍스트, X, Y)는- 캔버스에 고체 텍스트를 그립니다
- strokeText (텍스트, X, Y)- 캔버스 빈 텍스트 그리기
fillText ()를 사용하여
예
"굴림"글꼴 캔버스에 높은 30 픽셀 텍스트 (고체) 렌더링을 사용하여
자바 스크립트 :
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
»시도
strokeText ()를 사용하여
예
"굴림"글꼴 캔버스에 높은 30 픽셀 텍스트 (중공) 렌더링을 사용하여
자바 스크립트 :
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
»시도
캔버스 - 그라데이션
구배 등 사각형, 원, 라인, 텍스트, 충전 할 수 있고, 다양한 형상은 다른 색상을 정의 할 수있다.
여기에 캔버스 그라데이션을 설정하는 두 가지 방법은 다음과 같습니다 :
- createLinearGradient (X, Y, X1,Y1) - 라인 그라데이션 만들기
- createRadialGradient (X, Y, R,X1, Y1, R1) - 반경 / 라운드-등급 만들기
우리가 그라데이션 객체를 사용하면 두 개 이상의 정지 색상을 사용해야합니다.
addColorStop () 색상 정지를 지정하는 방법은, 사용은 0-1가 될 수있는 매개 변수를 설명하기 위해 조정합니다.
fillStyle에서는 또는 strokeStyle 값 구배를 설정 그라데이션을 사용하여 다음과 같은 사각형, 텍스트 또는 라인과 같은 모양을 그립니다.
createLinearGradient ()를 사용하여
예
선형 그라데이션을 만듭니다. 그라데이션 채우기 사각형을 사용하여
자바 스크립트 :
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
»시도
createRadialGradient ()를 사용하여
예
방사형 / 원형 그라데이션을 만듭니다. 그라데이션 채우기 사각형을 사용하여
자바 스크립트 :
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
»시도
캔버스 - 이미지
다음과 같은 방법을 사용하여 캔버스 상에 하나의 이미지 :
- 의 drawImage(화상, X, Y)
이미지를 사용합니다 :
예
이미지가 캔버스에 배치된다 :
자바 스크립트 :
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
»시도
HTML 캔버스 참조 설명서
라벨의 전체 속성을 참조 할 수 있습니다 캔버스 참조 설명서를.
되는 HTML <캔버스> 태그
| Tag | 描述 |
|---|---|
| <canvas> | HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 |