HTML5 기본 지식 요약
- 大家讲道理원래의
- 2016-11-09 11:54:221273검색
1. 캔버스 그리기
단계
캔버스 요소 추가, ID 및 범위 정의
js에서 캔버스 가져오기
요소는 getContext() 메소드를 통해 2D 그리기 환경을 확보합니다.
은 다양한 기능을 통해 그래픽 그리기를 수행합니다.
좌표 위치 지정
그림 위치 지정은 캔버스의 왼쪽 상단을 (0,0) 원점으로 합니다.
직선 그리기
moveTo(): 시작점을 지정합니다
lineTo(): 시작점을 지정합니다. 시작점을 지정된 좌표로
Stroke(): 직선을 그리는 기능 구현
fill(): 채우기 구현 함수
예: 삼각형 그리기
html 코드
<body> <canvas id="canvas"></canvas> </body>
js 코드
window.onload = function(){ var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800; var context = canvas.getContext('2d');
context.strokeStyle = "red";
context.moveTo(100, 100);
context.lineTo(200, 100);
context.lineTo(150,50);
context.lineTo(100,100);
context.stroke();
};
직사각형 그리기
fillStyle(): 사각형 채우기 색상을 설정합니다.
fillRect(x,y,너비,높이).
StrokeStyle(): 직사각형 외곽선 색상을 설정합니다.
StrokeRect(x,y,너비,높이).
원(호) 그리기
beginPath(): 경로 그리기 시작
arc(x,y,radius,startAngle,endAngle,anticlockwise)
그리기의 중심점, 반경, 시작 각도, 끝 각도 및 그리기 방향을 설정합니다.
베지어 곡선
2차 베지어 곡선
quadraticCurveTo(cp1x,cp1y,x,y)
cp1x, cp1y는 제어점의 좌표를 나타내고, x, y는 끝점의 좌표를 나타냅니다.
3차 베지어 곡선
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
cp1x,cp1y 및 cp2x 및 cp2y는 각각
두 개의 제어점을 나타냅니다.
예시 1: 오각별 그리기
window.onload = function() { var canvas = document.getElementById("canvas"); var context = canvas.getContext('2d');
drawStar(context, 120, 120, 80, 30, 10, "yellow", 0);
} function drawStar(context, x, y, R, r, width, color, rotation) {
context.beginPath(); for (var i = 0; i < 5; i++) {
context.lineTo(Math.cos((18 + i * 72 - rotation) / 180 * Math.PI) * R + x, -Math.sin((18 + i * 72 - rotation) / 180 * Math.PI) * R + y);
context.lineTo(Math.cos((54 + i * 72 - rotation) / 180 * Math.PI) * r + x, -Math.sin((54 + i * 72 - rotation) / 180 * Math.PI) * r + y);
}
context.closePath();
context.lineWidth = width;
context.fillStyle = color;
context.fill();
}
예시 2: BMW 로고 그리기
window.onload = function() { var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800; var context = canvas.getContext('2d'); //圆心坐标x,y 内圆半径r 外圆半径R var x = 100; var y = 100; var r = 100; var R = r + 50; var colors = Array("#87CEFA", "#FAFAFA", "#000");
context.beginPath();
context.translate(100, 100);
context.arc(x, y, R, 0, Math.PI * 2);
line_gra = context.createLinearGradient(-10, -10,20, 50);
line_gra.addColorStop(0, "#ddd");
line_gra.addColorStop(1, "#262626");
context.lineWidth = 3;
context.strokeStyle = "#000";
context.fillStyle = line_gra;
context.closePath();
context.stroke();
context.fill();
drawBigRound(context, x, y, r, 53, "#ADD8E6", 7);
drawBm(context, x, y, r, colors);
drawBigRound(context, x, y, r, 3, "#9FB6CD", 5);
context.beginPath();
context.fillStyle = "#fff";
context.font = "bold 40px verdana";
context.fillText("M", 80, -10);
context.rotate(Math.PI / 6);
context.fillText("W", 125, -75);
context.rotate(-(Math.PI / 2));
context.fillText("B", 0, 35);
context.restore();
} function drawBm(context, x, y, r, colors) { var color; for (var i = 0; i < 4; i++) {
context.beginPath();
context.moveTo(x, y);
context.arc(x, y, r, Math.PI * i / 2, Math.PI * (i + 1) / 2); if (i == 0 || i == 2) {
color = colors[0];
} else {
color = colors[1];
}
context.fillStyle = color;
context.lineWidth = 2;
context.strokeStyle = colors[2];
context.closePath();
context.fill();
context.stroke();
}
} function drawBigRound(context, x, y, r, addr, color, lineWidth) {
context.beginPath();
context.arc(x, y, r + addr, 0, Math.PI * 2);
context.lineWidth = lineWidth;
context.strokeStyle = color;
context.closePath();
context.stroke();
}
2.CSS3 섀도우 box-shadow
box-shadow: h-shadow v-shadow 블러 스프레드 색상 삽입 ;
h-섀도가 필요합니다. 수평 그림자의 위치입니다. 음수 값이 허용됩니다.
v-shadow 필수입니다. 수직 그림자의 위치입니다. 음수 값이 허용됩니다.
흐림 선택사항. 퍼지 거리.
확산 선택사항. 그림자의 크기.
색상 선택사항입니다. 그림자의 색상입니다. CSS 색상 값을 참조하세요.
삽입 선택사항. 외부 그림자(시작)를 내부 그림자로 변경합니다.
3.CSS3 변환 속성
transform: none|transform-functions;
transform :rotate(): 회전, deg는 각도를 의미합니다
transform: rotate(-10deg);
transform:skew(): Tilt
transform:skew(20deg);
transform:scale(): 크기 조정, x 방향으로 2배, y 방향으로 1.5배
transform: scale(2, 1.5);
transform :translate(): 번역, x 방향으로 120px, y 방향으로 10px
transform:translate(120px,10px);
4. CSS3 번역 속성
전환: 속성 기간 타이밍- 지연 함수;
transition-property는 전환 효과를 설정하는 CSS 속성의 이름을 지정합니다.
transition-duration은 전환 효과를 완료하는 데 걸리는 시간(초 또는 밀리초)을 지정합니다.
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。
div { width:100px; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ }