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

This article focuses on "what are the six new features of HTLM". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "what are the six new features of HTLM"?

I. drawing techniques that can be used in the Web domain

(1) WebGL, which is powerful and has long appeared, is not a HTML standard

(2) SVG-already appeared and incorporated into the HTML5 standard

(3) Canvas, which emerged recently, is the HTML5 standard.

The functions that can be achieved by web drawing:

(1) Real-time trend chart

(2) Statistical chart

(3) online drawing board

(4) Map

(5) Games

There are two difficulties in Canvas drawing:

(1) it is difficult to remember because there are many methods.

(2) calculation of coordinate point values-primary school mathematics + quadratic equation + trigonometric function

II. The third of the new features of HTML5-- Canvas drawing technology

Canvas: canvas, you can use a brush to draw on the canvas. The Canvas element is a 300-150 inline-block.

Note: the width and height of Canvas cannot be set using the CSS style!

Your browser Canvas tag

/ / Canvas drawing technology belongs to JS drawing technology.

Var ctx = c9.getContext ('2d'); / / get the brush on the canvas-drawing context object

Common properties of drawing context objects:

FillStyle:'# 000' fill pattern

StrokeStyle:'#000' outline / Stroke Styl

LineWidth: 1 Stroke width

Font: "10px sans-serif" font

TextAlign: 'start' text alignment

TextBaseline: 'alphabetic' text baseline

ShadowColor: 'rgba (0pc0re0p0pl 0) Shadow Color

ShadowBlur: 0 Shadow Blur Radiu

Horizontal offset of shawdowOffsetX: 0 shadow

ShawdowOffsetY: 0

Common methods for drawing context objects:

(1) draw a rectangle

(2) draw text

(3) drawing path

(4) drawing image

three。 Draw a rectangle using the Canvas drawing context

Note: the anchor point of the rectangle is in its upper left corner.

Ctx.fillStyle ='# 000 colors; fill color

Ctx.strokeStyle ='# 000 colors; Stroke Color

Ctx.lineWidth = 1; stroke lineweight

Ctx.fillRect (x, y, w, h) fills a rectangle

Ctx.strokeRect (x, y, w, h) strokes a rectangle

Ctx.clearRect (x, y, w, h) clears all contents within a rectangular range

four。 Draw text using the Canvas drawing context

Note: the anchor point of the string is at the leftmost end of the text baseline

Ctx.textBaseline = 'alphabetic' / / text baseline, top / bottom / middle

Ctx.font = "10px sans-serif"; font size

Ctx.fillText (txt, x, y) fill text

Ctx.strokeText (txt, x, y) stroke text

Ctx.measureText (txt). Width measures the total width of the specified text based on the current font settings

five。 Add shadows to the graphic

Ctx.shadowColor = 'rgba (255, 255, 255, 0, 1)'

Ctx.shadowBlur = 5

Ctx.shadowOffsetX = 5

Ctx.shadowOffsetY = 5

six。 Add a gradient style to a drawin

Create a linear gradient object:

Var g = ctx.createLinearGradient (50150450150)

G.addColorStop (0,'# f00'); / / add color dots

G.addColorStop (0.5,'# ff0'); / / add color points

G.addColorStop (1,'# 0f0'); / / add color dots

Apply a gradient object to a fill or stroke styl

Ctx.fillStyle = g

Ctx.strokeStyle = g

At this point, I believe you have a deeper understanding of "what are the six new features of HTLM". 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.