댓글 : HTML5에서 가장 중요한 것은 캔버스를 소개하여 웹에 다양한 그래픽을 그릴 수 있으며 캔버스는 픽셀 기반 드로잉입니다. 캔버스는 아트 보드와 해당 HTML 노드이며 JS로 그려야합니다.
HTML5에서 가장 중요한 것은 캔버스를 도입하여 웹에서 다양한 그래픽을 그릴 수 있도록하는 것입니다. 그것은 사람들 에게이 점에서 조금 흐릿하다는 느낌을줍니다. HTML5 웹에는 VML 및 SVG와 같은 XML 기반 도면도 있습니다. 캔버스는 픽셀 기반 도면입니다. 캔버스는 아트 보드와 해당 HTML 노드이며 JS를 그려야합니다.다음과 같이 :
<canvas id = mycanvas 너비 = 600 높이 = 300> 브라우저는 정의 </canvas>를 지원하지 않습니다.
우리는 캔버스 개체를 var c = document.getElementByid (mycanvas)로 가져올 수 있습니다. JS 속성 메소드는 다음과 같이 나열되어야합니다.
1 : 렌더링 된 객체 인 C.getContext (2D)를 그려 2D 드로잉 객체를 가져옵니다. 우리가 객체를 몇 번이라고 부르더라도 객체는 같은 객체가 될 것입니다.
2 : 그리기 방법 :
clecrrect (왼쪽, 상단, 너비, 높이) 정의 된 사각형 영역을 지 웁니다.
FillRect (왼쪽, 상단, 너비, 높이)는 사각형을 끌어 내고 FillStyle로 채 웁니다.
fillText (텍스트, x, y)는 텍스트를 그립니다.
Strokerect (왼쪽, 상단, 너비, 높이)는 사각형을 그리고 뇌졸중으로 경계를 그립니다.
시작 경로 () : 경로의 도면을 켜고 경로를 초기 상태로 재설정하십시오.
ClosePath () : 경로 경로 끝을 그리면 닫힌 간격을 그리며 시작 위치에서 현재 좌표로 닫힌 곡선을 추가합니다.
Moveto (x, y) : 도면의 실제 좌표를 설정하십시오.
Lineto (x, y); 현재 위치에서 x, y로 직선을 그립니다.
fill (), stroke (), clip () : 마지막 채우기 및 경계 개요는 그 그리기, 클립 영역입니다.
ARC () : 아크, 중앙 위치, 시작 라디안 및 엔드 라디안을 그리며 아크의 위치와 크기를 지정합니다.
rect () : 직사각형 경로;
DrawImage (Imag IMG) : 그림을 그리십시오.
2 차 urveto () : 2 차 스플라인 경로, 매개 변수 두 제어점;
Beziercurveto () : Bezier 곡선, 매개 변수의 3 가지 제어점;
CreateImagedata, getImagedata, putimageData : 캔버스의 픽셀 데이터입니다. Imagedata는 레코드 너비, 높이 및 데이터 데이터이며, 여기서 데이터는 안료의 기록입니다.
ArgB, 배열 크기 길이는 너비*높이*4이고 순서는 각각 rgba입니다. getImagedata는 직사각형 영역 픽셀을 얻는 것이며, putimageatata는 직사각형 영역 픽셀을 설정하는 것입니다.
… 그리고 그렇게!
3 : 좌표 변환 :
번역 (x, y) : 번역, 원점은 좌표 (x, y)로 이동합니다.
회전 (a) : 회전 변환, 1도 회전 각도;
스케일 (x, y) : 스케일링 변환;
save (), restore () : 스택 및 스택, 저장 및 저장 및 복원, 저장 현재 드로잉 상태를 스택으로 밀고 스택을 복원하고 도면 상태를 복원합니다.
… 그리고 그렇게!
좋아, 너무 늦었다. 내 테스트 코드 첨부 :
<html>
<헤드>
</head>
<body>
<canvas> 브라우저가 지원하지 않습니다 </canvas>
<script type = "text/javaScript">
var 너비, 높이, 상단, 왼쪽;
너비 = 높이 = 100;
상단 = 왼쪽 = 5;
var x = 10;
var y = 10;
var c = document.getElementById ( "mycanvas");
var maxwidth = c.width-5;
var maxheight = c.height-5;
var cxt = c.getContext ( "2d");
cxt.strokestyle = "#00f";
CXT.Strokerect (0,0, C.Width, C.height);
var img = new Image ();
img.src = "1.gif";
var myinterval = null;
시작();
기능 새로 고침 () {
cxt.clearRect (왼쪽, 상단, 너비, 높이);
if ((왼쪽+x)> (maxWidth-width) || 왼쪽+x <0) {
x = -x;
}
if ((top+y)> (maxheight-height) || top+y <0) {
y = -y;
}
왼쪽 = 왼쪽+x;
Top = Top+Y;
cxt.DrawImage (IMG, 왼쪽, 상단, 너비, 높이);
cxt.font = "20pt songyi";
cxt.filltext ( "Breaking Wolf", 왼쪽, 상단+25);
}
함수 start () {
if (myinterval == null) {
myInterval = setInterval ( "refresh ()", 100);
}
}
함수 정지 () {
if (myinterval! = null) {
ClearInterval (MyInterval);
myinterval = null;
}
}
함수 inrectangle (x, y, rectx, recty, rwidth, rheight) {
return (x> = rectx && x <= rectx+rwidth) && (y> = recty && y <= recty+rheight)
}
c.onmouseOver = function (e) {
if (inrectangle (e.clientx, e.clienty, 왼쪽, 상단, 너비, 높이)) {
멈추다();
}
c.onMouseOut = function (e) {
시작();
}
c.onmouseMove = function (e) {
if (inrectangle (e.clientx, e.clienty, 왼쪽, 상단, 너비, 높이)) {
if (myinterval! = null) {
멈추다();
}
}또 다른{
시작();
}
}
}
</스크립트>
</body>
</html>