Li Yanhui HTML5 비디오 데이터 공유
- 巴扎黑원래의
- 2017-08-31 11:57:542983검색
HTML5에 대해 자세히 소개하는 비디오 튜토리얼 "Li Yanhui HTML5 비디오 튜토리얼"을 알아보세요. HTML5는 HTML(Hypertext Markup Language)의 다섯 번째 주요 수정 버전입니다. 즉, HTML5보다 몇 가지 새로운 태그가 추가된 최신 버전입니다. 원래 표준, 더 많은 기능을 달성하고, 더 표준화되고, 모바일 인터넷에 더 적합합니다.
동영상 재생 주소: http://www.php.cn/course/365.html
이 강좌의 어려움은 HTML5의 새로운 콘텐츠와 캔버스 사용에 있습니다.
많은 그림 효과 캔버스를 이용해 구현하기 때문에 HTML5를 잘 익히려면 캔버스를 잘 배우는 것이 중요합니다.
1. 캔버스 소개
1.1 캔버스란?
은 HTML5의 중요한 요소로, 외부 플러그인 없이 실행할 수 있습니다.
캔버스의 중국어 번역은 "캔버스"이며 강력한 그래픽 처리 기능(그리기, 변환, 픽셀)을 제공합니다. 처리…).
그러나 캔버스 요소 자체는 그래픽을 그리는 것이 아니라 단지 빈 캔버스와 동일하다는 점에 유의해야 합니다.
개발자가 캔버스에 그래픽을 그려야 하는 경우 JavaScript 스크립트를 사용하여 그려야 합니다.
1.2 캔버스는 무엇을 할 수 있나요?
기본 그래픽 그리기
텍스트 그리기
그래픽 변형 및 그림 합성
사진 및 동영상 처리
애니메이션 구현
미니 게임 제작
1.3 지원되는 브라우저
1.3 대부분의 최신 브라우저 모두 Firefox, Safari, Chrome, 최신 버전의 Opera 및 IE9와 같은 Canvas 지원
IE8 이하는 HTML5를 지원하지 않지만 사용자에게 최신 버전으로 업데이트하라는 메시지를 표시할 수 있습니다.
1.4 캔버스 태그에 대한 정의의 기본 개념 HTML 페이지의 캔버스 요소는 다른 일반 요소를 정의하는 것과 다르지 않습니다. id, 스타일, 클래스, 숨김 등과 같은 공통 속성을 지정하는 것 외에도 너비 및 높이 속성을 설정할 수도 있습니다.
이렇게 구체적으로 말해야 하는 이유는 무엇인가요?
2.2장에서 자세히 설명하겠습니다.
또한 웹 페이지에서 캔버스 요소를 정의한 후에는 단지 빈 캔버스일 뿐입니다. 캔버스에 그림을 그리려면 다음 단계를 거쳐야 합니다.
캔버스 요소에 해당하는 DOM 개체를 가져옵니다. 이 개체는 캔버스 개체여야 합니다.
그래픽을 그릴 수 있는 canvasRenderingContext2D 개체를 반환하는 캔버스 개체의 getContext() 메서드를 호출합니다.
canvasRenderingContext2D 객체의 메서드를 호출하여 그립니다.
그럼 캔버스 연습을 시작하고 캔버스가 어떻게 그래픽을 그릴 수 있는지 살펴보겠습니다.
2.canvas in action
2.1 현재 브라우저에서 캔버스를 지원하는지 확인하세요
또한 일부 브라우저가 캔버스를 지원하지 않는다고 위에서 설명했습니다.
이때, 캔버스 태그 사이에 직접 콘텐츠를 작성할 수 있습니다. 이것의 장점은 브라우저가 캔버스를 지원하지 않는 경우 다음과 같이 태그 사이에 콘텐츠를 표시할 수 있다는 것입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
html,body{
margin: 0px;
}
canvas{
background: #ccc;
}
</style>
</head>
<body>
<canvas>
我们在设置 canvas 之前需要首先监测用户电脑是否支持 canvas
</canvas>
</body>
</html>특정 콘텐츠가 생성되었으니 이제 보실까요?
캔버스의 너비와 높이를 지정하지 않았지만 실제로 캔버스가 페이지에 표시됩니다.
캔버스 기본 스타일의 너비와 높이는 300px * 150px입니다.
특정 너비와 높이를 설정하지 않아도 표시될 수 있습니다.
아아아아위 내용은 Li Yanhui HTML5 비디오 데이터 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!