Backend.com HTML5 video tutorial

"Backend.com HTML5 Video Tutorial" is an important technology now and in the future. Learning HTML5 well will not only allow you to develop WEB front-end interfaces and design web pages that can adapt to devices of various sizes; it can even allow you to use HTML5 technology to develop Develop Hybird App (a hybrid application for Android/iOS/Windows Phone and other devices); or use HTML5 technology to develop desktop programs (see the Node Webkit project, please use Github).

Course playback address: //m.sbmmt.com/course/469.html

The Teacher's teaching style:

The teacher's lectures are simple and in-depth, clear in structure, analyzed layer by layer, interlocking, rigorous in argumentation, and rigorous in structure. He uses the logical power of thinking to attract students' attention and controls the classroom with reason. teaching process. By listening to the teacher's lectures, students not only learn knowledge, but also receive thinking training, and are also influenced and influenced by the teacher's rigorous academic attitude

The more difficult point in this video is HTML5 Canvas:

1. What is Canvas

canvas is a tag provided by HTML5 for displaying drawing effects

canvas provides a blank graphics area that can use specific JavaScript API to draw graphics (canvas 2D or WebGL)

First introduced by Apple, used in OS X dashboard and Safari browser

1.1 Some notes about Canvas

canvas is a rectangular area of ​​canvas that can be painted on using JavaScript. Control every pixel of it.

The canvas tag uses JavaScript to draw images on the web page and does not have the drawing function itself.

canvas has many ways to draw paths, rectangles, circles, characters, and add images.

Canvas standard:

Latest standard

Stable version standard

Currently, the standard is still being improved. First use the early API to complete all applications

1.2 Main application areas of canvas (understand)

1. Games: canvas is more three-dimensional and more sophisticated than Flash in terms of Web-based image display , canvas games are better in terms of fluency and cross-platform.

2. Visualized data (data charts), such as: Baidu’s echart, d3.js, three.js

3. Banner advertising: Flash was once a glorious era, and smartphones had not yet Appear. Now and in the future era of smartphones, HTML5 technology can play a huge role in banner advertising, and using Canvas to achieve dynamic advertising effects is perfect.

4. Future

Simulator: No matter in terms of visual effects or core functions, the simulator product can be completely implemented by JavaScript.

Remote computer control: Canvas allows developers to better implement Web-based data transmission and build a perfect visual control interface.

Graphic Editor: The Photoshop graphics editor will be 100% web-based.

1.3 Course Objectives

Learn to use the basic canvas api, and use canvas to complete simple drawings

Visualize data

2. Introduction to Canvas tags

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

Function: Display the content of drawing, but cannot draw

2.1 Compatibility of canvas

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

Only IE9 and above browsers support the canvas tag
Tip: Your browser does not support canvas, please upgrade the browser

2.2 Notes on setting width and height

1 You can use html attributes/DOM attributes Set width and height

2 Don’t: use CSS styles to set width and height

Use attributes to set width and height, which is actually equivalent to increasing the pixels of the canvas
Default width and height: 300*150 means: 300 pixels in the horizontal direction and 150 pixels in the vertical direction
Using attributes to set the width and height increases or decreases the pixels of the canvas;
Using css style does not increase the pixels point, just expand each pixel!

2.3 Drawing

Use the drawing API provided in JavaScript to draw

Each canvas has a set of drawing API (tools)

2.3.1 Basic steps of drawing

1 Find the canvas

2 Get the drawing context (a series of API collections) through canvas

3 Use the API to draw the required graphics

// 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();           // 描边

Note:

getContext("2d"), the parameter `2d` refers to getting the context for drawing flat graphics;
If you want to draw three-dimensional graphics, you need to pass in the parameters :"webgl"

2d Context type: CanvasRenderingContext2D

Get webgl context: (understand)

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

The above is the detailed content of Backend.com HTML5 video tutorial. For more information, please follow other related articles on the PHP Chinese website!