Canvas is a tag provided by HTML5 for displaying drawing effects. The "5ba626b379994d53f7acf72a64f9b697" tag provides a blank graphics area (a rectangular area of ​​canvas) and requires the use of a specific JavaScript API to draw graphics. .

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

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 drawn 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 a variety of methods for drawing paths, rectangles, circles, characters, and adding images.

1.2 The 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, and canvas games are more advanced in fluency and cross-platform Even better.

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

3) Banner advertising: In the glorious era of Flash, smartphones Has not appeared yet. 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.

2. Introduction to Canvas tag

<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">
    IE9及其以上版本的浏览器，才支持canvas标签
    提示：您的浏览器不支持canvas，请升级浏览器
</canvas>

2.2 Set width High attention points

1) You can use html attributes/DOM attributes width and height to set

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

Use attributes Setting the width and height is actually equivalent to increasing the pixels of the canvas

Default width and height: 300*150, which means: 300 pixels in the horizontal direction and 150 pixels in the vertical direction

Use Setting the width and height of the attribute increases or decreases the pixels of the canvas;

Using css style does not increase the pixels, but only expands 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 canvas

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

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

Recommended tutorial: "html video tutorial"

The above is the detailed content of What is html5 canvas. For more information, please follow other related articles on the PHP Chinese website!