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

This article mainly explains "how to draw graphics in HTML5." Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "how to draw graphics in HTML5"!

Elements in HTML5 that can draw graphics: 1."canvas" element, which can draw graphics dynamically through JavaScript scripts;2."SVG" element, which can define vector-based graphics for networks, using XML format to define graphics.

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

HTML5 Canvas and SVG both allow you to create graphics in the browser, but they are fundamentally different.

SVG

SVG is a language for describing 2D graphics using XML.

SVG is XML-based, which means that every element in SVG DOM is available. You can attach JavaScript event handlers to an element.

In SVG, every graphic drawn is considered an object. If the SVG object's attributes change, the browser can automatically render the graphics.

Canvas

Canvas draws 2D graphics through JavaScript.

Canvas is rendered pixel by pixel.

In canvas, once a graphic is drawn, it doesn't continue to get the browser's attention. If its position changes, the entire scene also needs to be redrawn, including any objects that may have been overwritten by the graphic.

I. Canvas

canvas is a new HTML5 tag and javascript API for manipulating canvas, which enables dynamic 2D and 3D graphics technology in web pages. An important difference between markup and SVG and VML is that there is a JavaScript-based drawing API, whereas SVG and VML use an XML document to describe drawings. SVG drawings are easy to edit and generate, but significantly less powerful.

Canvas can complete animation, games, charts, image processing and other functions that originally needed Flash to complete.

1. Creating a canvas

Create a canvas tag in html, preferably set the width and height in the tag itself. If you set the width and height in other ways, there will be a displacement difference of 0.5.

var draw=document.getElementById("draw");//Get canvas element var draws=draw.getContext("2d");//Give canvas a drawing environment, 2d means drawing in 2d environment//draws returns an object

2. Drawing

//Draw Lines//Set Line Width draws.lineWidth = 10;//Set Line Color draws.strokeStyle = "blue"; draws.moveTo(0,0);//Move the brush to 0,0 points draws.lineTo(300,300); //Draw lines to 300,300 positions draws.stroke();//stroke//draw rectangle draws.strokeRect (x,y,width,height) //draw a border rectangle draws.fillRect (x,y,width,height) //Draw a filled rectangle draws.clearRect (x,y,width,height) //Clear a rectangle//Draw a circle draws.arc (x,y,radius,startAngle,endAngle,anticlockwise)//arc method is used to draw an arc path with radius at the center position of (x,y), startAngle as the starting radian,//endAngle as the ending radian, and the rotation direction when drawing the arc is specified by the last parameter anticlockwise.//If true it is counterclockwise, false it is clockwise, Math.PI * 2 is exactly one week.// The requested URL/img/was not found on this server.

//in JS...// You need to execute_window.onload=function(){//Draw text//Stroke text draws.font="50px microsoft yahei"//Set stroke font color draws.strokeText ("Hello", 20,100) //Set stroke text content, and X coordinate Y coordinate//Fill text draws.fillStyle="red"//Set fill font color draws.fillText("Hello", 20,200); //Set fill text content, and X coordinate Y coordinate

Understand some canvas methods

draws. initipath ()draws.closepath()//Both appear together Close the path drawn and automatically close the path draws.save()draws.restore()//Both appear in pairs The middle attribute style affects only the inside and does not affect the outside//translate()draws.strokeRect (0, 0, 150, 150);draws.translate (150, 150);draws.strokeRect (0, 0, 150, 150); //translated element//coordinates of translated element will change after translation//rotate()draws.rotate(0.2);draws.strokeRect(75, 75, 75); //rotate according to canvas 0, 0 points 2, SVG

SVG Scalable Vector Graphics is a graphics format based on Extensible Markup Language (XML) for describing two-dimensional vector graphics. SVG is a new two-dimensional vector graphics format formulated by W3C(World Wide Web Consortium) in August 2000, and it is also a network vector graphics standard in the specification. SVG strictly follows XML syntax and describes image content in a descriptive language of text format, so it is a vector graphics format independent of image resolution. SVG became a W3C Recommendation on January 14, 2003.

Features:

1. Arbitrary scaling

The user can zoom the image display arbitrarily without destroying the sharpness, detail, etc. of the image.

2. Text independence

Text in SVG images is independent of the image and remains editable and searchable. There are no font restrictions, and even if the user system does not have a font installed, it will see exactly the same screen as when they made it.

3. Smaller files

In general, SVG files are much smaller than those in GIF and JPEG formats and download quickly.

4, super display effect

SVG images always have sharp edges on the screen, and its sharpness fits any screen resolution and print resolution.

5. Super color control

SVG images provide a palette of 16 million colors that support ICC color profile standards, RGB, line X fill, gradients, and masks.

6. Interactive X and intelligence. One of the main problems SVG faces is how to compete with Flash, a vector graphics format that already has a significant market share, and another is the degree of vendor support for SVG in its native runtime environment.

Browser Support:

Internet Explorer9, Firefox, Google Chrome, Opera and Safari all support SVG.

Both IE 8 and earlier versions require a plug-in-like Adobe SVG browser, which is freely available.

1. Introduction method

Method 1:

draw graphics

xmlns: namespaces

version: version

Method 2:

2. Drawing

//Draw a line//Parameters://x1 attribute defines start of line on x axis//y1 attribute defines start of line on y axis//x2 attribute defines end of line on x axis//y2 attribute defines end of line on y axis//draw circle, Ellipses//Parameters//x coordinates of ellipse center defined by CX attribute//y coordinates of ellipse center defined by CY attribute//horizontal radius defined by RX attribute//vertical radius defined by RY attribute//draw text My Text//draw rectangle

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.