Backend.com HTML5 비디오 튜토리얼

"Backend.com HTML5 비디오 튜토리얼"은 현재와 미래에 중요한 기술입니다. HTML5를 잘 배우면 웹 프런트 엔드 인터페이스를 개발하고 다양한 크기의 장치에 적응할 수 있는 웹 페이지를 디자인할 수도 있습니다. HTML5 기술을 사용하여 Hybird 앱(Android/iOS/Windows Phone 및 기타 장치용 하이브리드 개발 애플리케이션)을 개발하거나 HTML5 기술을 사용하여 데스크톱 프로그램을 개발할 수 있습니다(Node Webkit 프로젝트 참조, Github를 사용하십시오).

강좌 재생 주소: http://www.php.cn/course/469.html

선생님의 강의 스타일:

선생님의 강의는 간단하고 심층적이며 구조가 명확합니다. , 그리고 층별로 분석합니다. 상호 연결되고 엄격한 논증, 엄격한 구조를 사용하여 논리적 사고력을 사용하여 학생들의 관심을 끌고 이성을 사용하여 교실 교육 과정을 제어합니다. 선생님의 강의를 들으면서 학생들은 지식을 배울 뿐만 아니라 사고력 훈련도 받으며 선생님의 엄격한 학문적 태도에 영향을 받고 영향을 받습니다

이 영상에서 더 어려운 점은 HTML5 Canvas입니다:

1. 캔버스란

캔버스는 그리기 효과를 표시하기 위해 HTML5에서 제공하는 태그입니다.

캔버스는 특정 JavaScript API를 사용하여 그래픽(캔버스 2D 또는 WebGL)을 그릴 수 있는 빈 그래픽 영역을 제공합니다.

Apple에서 처음 도입했습니다. OS X 대시보드 및 Safari 브라우저의 경우

1.1 캔버스에 대한 몇 가지 참고 사항

캔버스는 JavaScript로 칠할 수 있는 캔버스의 직사각형 영역입니다. 모든 픽셀을 제어하세요.

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

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

캔버스 표준:

최신 표준

안정 버전 표준

현재 표준은 계속 개선되고 있습니다. 첫째, 초기 API를 사용하면 모든 애플리케이션이 완성됩니다

1.2 캔버스의 주요 응용 영역(이해)

1. 게임: 캔버스는 웹 기반 이미지 표시 측면에서 Flash보다 더 입체적이고 정교합니다. 캔버스 게임은 더욱 부드럽고 다양한 기능을 제공합니다.

2. 시각화된 데이터(데이터 차트의 경우): Baidu의 echart, d3.js, three.js

3. 배너 광고: 한때 Flash가 전성기였을 때 스마트폰은 아직 등장하지 않았습니다. 현재와 ​​미래의 스마트폰 시대에는 HTML5 기술이 배너 광고에서 큰 역할을 할 수 있으며, Canvas를 사용하여 역동적인 광고 효과를 얻는 것이 완벽합니다.

4. 미래

시뮬레이터: 시각적 효과나 핵심 기능에 관계없이 시뮬레이터 제품은 JavaScript로 완벽하게 구현될 수 있습니다.

원격 컴퓨터 제어: 캔버스를 사용하면 개발자는 웹 기반 데이터 전송을 더 효과적으로 구현하고 완벽한 시각적 제어 인터페이스를 구축할 수 있습니다.

그래픽 편집기: Photoshop 그래픽 편집기는 100% 웹 기반입니다.

1.3 과정 목표

기본 캔버스 API 사용법을 배웁니다. 캔버스를 사용하여 간단한 그림 완성

데이터 시각화 달성

2. 캔버스 태그 소개

<canvas width="600" height="400"></canvas>

기능: 그림의 내용을 표시하지만 그릴 수는 없습니다

2.1 캔버스 호환성

<canvas width="600" height="400">

IE9 이상의 브라우저에서만 캔버스 태그를 지원합니다
팁: 브라우저가 캔버스를 지원하지 않습니다. 브라우저를 업그레이드하세요

2.2 너비 및 높이 설정에 대한 참고 사항

1 할 수 있습니다 html 속성/DOM 속성을 사용하여 너비와 높이를 설정하세요.

2 하지 마세요: CSS 스타일을 사용하여 너비와 높이를 설정하세요.

속성을 사용하여 너비와 높이를 설정하는 것은 실제로 캔버스의 픽셀을 늘리는 것과 같습니다.
기본값 너비 및 높이: 300*150은 가로 방향으로 300픽셀, 세로 방향으로 150픽셀을 의미합니다. 속성을 사용하여 너비와 높이를 설정하면 CSS 스타일을 사용하면 픽셀이 늘어나거나 줄어듭니다. 픽셀만 변경됩니다. 모든 픽셀이 확장되었습니다!


2.3 그리기

자바스크립트에서 제공하는 그리기 API를 사용해 그림을 그립니다

각 캔버스에는 일련의 그리기 API(도구)가 있습니다

2.3.1 그리기의 기본 단계

1 캔버스 캔버스 찾기

2 캔버스를 통해 그리기 컨텍스트 가져오기(일련의 API 컬렉션)

3 API를 사용하여 필요한 그래픽 그리기

// 1 找到canvas
var cv = document.getElementById("canvasId");
// 2 拿到canvas绘图上下文
var ctx = cv.getContext("2d");
// 3 使用上下文中的API绘制图形
ctx.moveTo(100, 100);   // 将画笔移动到 100,100 的位置
ctx.lineTo(200, 100);   // 从 100,100 到 200,100 画一条线段
ctx.stroke();           // 描边

참고:

getContext("2d"), '2d' 매개변수는 평면 그래픽 그리기에 대한 컨텍스트 가져오기를 나타냅니다. ;

3차원 그래픽을 그리려면 매개변수 "webgl"을 전달해야 합니다. "webgl"

2d 컨텍스트 유형: CanvasRenderingContext2D

webgl 컨텍스트 가져오기: (이해)

var cCv = document.createElement("canvas");
        console.log(cCv.getContext("webgl"));

위 내용은 Backend.com HTML5 비디오 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!