HTML5 canvas_html5 튜토리얼 기술을 사용하는 방법

canvas 요소는 JavaScript를 사용하여 웹 페이지에 이미지를 그리며 그리기 기능은 없습니다.

캔버스는 모든 픽셀을 제어할 수 있는 직사각형 영역입니다.

캔버스에는 경로, 직사각형, 원, 문자를 그리고 이미지를 추가하는 다양한 방법이 있습니다.

다음은 몇 가지 예입니다.

1. 캔버스를 채워주세요

JavaScript 코드클립보드에 콘텐츠 복사

1. "myCanvas" width="200" height="100" style="border:1px solid red;">
2. <스크립트 유형="텍스트/자바스크립트">
3. var c=document.getElementById("myCanvas");
var
4. cxt=c.getContext("2d") cxt.fillStyle=
"#ccc"
5. cxt.fillRect(5,10,150,60)
//x, y, x, y
다음과 같이 실행하세요.

2. 좌표 가져오기

JavaScript 코드

클립보드에 콘텐츠 복사

<스크립트 유형=

1. "text/javascript">  함수
2. cnvs_getCoordinates(e){ x=e.clientX
3. y=e.clientY
4. document.getElementById(
"xycoordinates"
5. ).innerHTML="좌표: (" x " y ")" }
함수
6. cnvs_clearCoordinates(){ document.getElementById(
"xycoordinates"
7. ).innerHTML="";}

XML/HTML 코드

클립보드에 콘텐츠 복사

1. <div id="coordiv" 스타일="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(이벤트)" onmouseout="cnvs_clearCoordinates()">div>
2. <div id="xycoordinates" >div>

다음과 같이 실행하세요.

3. 선 및 그래픽 그리기

1) 다음과 같이 정사각형을 그립니다.

JavaScript 코드클립보드에 콘텐츠 복사

1. "myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
2. 귀하의 브라우저는 캔버스 태그를 지원하지 않습니다.
5. <스크립트 유형="텍스트/자바스크립트">
7. var c=document.getElementById("myCanvas");
var
8. cxt=c.getContext("2d") cxt.moveTo(10,10)
//x,y 시작점
9. cxt.lineTo(10,50)
//x,y
10. cxt.lineTo(50,50)
//x,y
11. cxt.lineTo(50,10)
//x,y
12. cxt.lineTo(10,10)
//x,y
13. cxt.Stroke()
다음과 같이 실행

2) 다음과 같이 원을 그립니다.

JavaScript 코드

클립보드에 콘텐츠 복사

1. "myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
2. 귀하의 브라우저가 캔버스를 지원하지 않습니다
5. <스크립트 유형="텍스트/자바스크립트">
6. var c=document.getElementById("myCanvas");
var
7. cxt=c.getContext("2d") cxt.fillStyle=
"#ccc"
8. cxt.beginPath()
9. cxt.arc(20,20,10,0,Math.PI*2,
true
10. ) cxt.closePath()
11. cxt.fill()
다음과 같이 실행하세요.

4. 그라데이션 그리기

JavaScript 코드

클립보드에 콘텐츠 복사

"myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 귀하의 브라우저가 캔버스 태그를 지원하지 않습니다.

<스크립트 유형=

"텍스트/자바스크립트"

> var

c=document.getElementById(

"myCanvas"); var cxt=c.getContext(

"2d"

) var grd=cxt.createLinearGradient(0,0,175,50)

grd.addColorStop(0,"#000000")

//Black

grd.addColorStop(1,"#FFFFFF")

//흰색

cxt.fillStyle=grd cxt.fillRect(5,10,175,50);

//x,y,x,y

다음과 같이 실행하세요.

5. 사진

JavaScript 코드

클립보드에 콘텐츠 복사

1. "myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;">
2. 귀하의 브라우저가 캔버스 태그를 지원하지 않습니다.
5. <스크립트 유형="텍스트/자바스크립트">
6. var c=document.getElementById("myCanvas");
var
7. cxt=c.getContext("2d")
var
8. img=new Image() img.src=
"aa.png"
9. cxt.drawImage(img,10,20)
//x,y
실행은 다음과 같습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

원문:

http://www.cnblogs.com/LoveSuk/archive/2016/03/17/5288368.html