Shulou(Shulou.com)06/02 Report--

This article mainly talks about "what is canvas in html5". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what is canvas in html5"?

Canvas is a label provided by HTML5 to show the effect of drawing. The "" tag provides a blank graphic area (the canvas of a rectangular area) and requires the use of a specific JavaScript API to paint the drawing.

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

1. What is Canvas

Canvas is a label provided by HTML5 to show the effect of drawing.

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

First introduced by Apple for OS X dashboards and Safari browsers

1.1 some notes about Canvas

Canvas is a canvas with a rectangular area on which you can draw with JavaScript. Controls each pixel.

Canvas tags use JavaScript to draw images on a web page and do not have the drawing function itself.

Canvas has a variety of ways to draw paths, rectangles, circles, characters, and add images.

1.2 areas of main applications of canvas (understanding)

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

2), visual data (data chart words), such as Baidu's echart, d3.js, three.js

3) banner Advertising: in the glorious era of Flash, smartphones have not yet appeared. Now and in the future smartphone era, HTML5 technology can play a great role in banner advertising, and it is more appropriate to use Canvas to achieve dynamic advertising effect.

4), the 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 achieve Web-based data transmission and build a perfect visual control interface.

Graph Editor: Photoshop Graph Editor will be able to be implemented 100% based on Web.

2. Introduction of Canvas tags

Function: to show the content of the drawing, but not to draw

2.1 canvas compatibility IE9 and above browsers support canvas tag hints: your browser does not support canvas, please upgrade browser 2.2 to set width and height points

1), can be set using the html property / DOM properties width and height

2), do not: use CSS style to set width and height

Setting width and height using properties is actually equivalent to increasing the pixels of the canvas canvas

Default width and height: 300 to 150, indicating that there are 300 pixels horizontally and 150 pixels vertically.

Use properties to set width and height to increase or decrease the pixels of the canvas canvas

Using the css style does not increase the number of pixels, but 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 for drawing

1) find the canvas canvas

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

3) use API to draw the required graphics

/ / 1), find canvas var cv = document.getElementById ("canvasId"); / / 2), get the canvas drawing context var ctx = cv.getContext ("2d"); / / 3), draw the graph ctx.moveTo using the API in the context (100,100); / / move the brush to the 100100 position ctx.lineTo (200,100); / / draw a line segment ctx.stroke from 100100 to 200100 () / / Stroke at this point, I believe you have a deeper understanding of "what is canvas in html5". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.