Li Yanhui HTML5 비디오 데이터 공유-H5 튜토리얼-php.cn

Li Yanhui HTML5 비디오 데이터 공유

巴扎黑

풀어 주다： 2017-08-31 11:57:54

원래의

3073명이 탐색했습니다.

HTML5에 대해 자세히 소개하는 비디오 튜토리얼 "Li Yanhui HTML5 비디오 튜토리얼"을 알아보세요. HTML5는 HTML(Hypertext Markup Language)의 다섯 번째 주요 수정 버전입니다. 즉, HTML5보다 몇 가지 새로운 태그가 추가된 최신 버전입니다. 원래 표준, 더 많은 기능을 달성하고, 더 표준화되고, 모바일 인터넷에 더 적합합니다.

Li Yanhui 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!