How to use html5 to achieve snowflake effect

This article focuses on "how to use html5 to achieve snowflake effect", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use html5 to achieve snowflake effect.

What is canvas?

The HTML5 element is used for drawing graphics, which is done through scripts (usually JavaScript).

Labels are just graphics containers, and you must use scripts to draw graphics.

You can use canvas to draw paths, boxes, circles, characters, and add images in a variety of ways.

II. The basic usage of canvas

1. Create a canvas (Canvas):

two。 Use JavaScript to draw an image:

/ / first find the element var c=document.getElementById ("myCanvas"); / / then create the context object var ctx=c.getContext ("2d"); / / the following two lines of code draw a red rectangle: ctx.fillStyle= "# FF0000"; ctx.fillRect

The getContext ("2d") object is a built-in HTML5 object with a variety of ways to draw paths, rectangles, circles, characters, and add images.

Setting the fillStyle property can be a CSS color, gradient, or pattern. The default setting for fillStyle is # 000000.

3.Canvas coordinates

Canvas is a two-dimensional grid.

The coordinate of the upper-left corner of canvas is (0pm 0).

Ctx.fillRect (0jue 0150,150,75)

The above fillRect method has parameters (0re0rec 15015015075).

Draw the rectangle of 150x75 on the canvas, starting at the upper left corner (0jin0).

4.Canvas-path

MoveTo (xPowery) defines the line start coordinates

LineTo (xPowery) defines the line end coordinates

To draw a circle in canvas, we will use the following method:

Arc (XMagneyQuery rMagneStart stop)

Use arc () to draw a circle:

Var c=document.getElementById ("myCanvas"); var ctx=c.getContext ("2d"); ctx.beginPath (); ctx.arc (95, 50, 40, and 0); ctx.stroke (); 3. The idea of realizing snowflake fluttering.

1. Create a canvas (Canvas)

The var canvas = document.getElementById ("canvas") / / parameter contextID specifies the type you want to paint on the canvas. / / currently the only legal value is "2d", which specifies a 2D drawing, / / and causes this method to return an environment object that exports a 2D drawing API. Var context = canvas.getContext ("2d") var w = window.innerWidth var h = window.innerHeight canvas.width = w; canvas.height = h

two。 Create an array of objects for snowflakes

Var count = 200 / / the number of snowflakes var snows= [] / / the array of snowflake objects for (var iSnow0; I < count;i++) {snows.push ({x:Math.random () * wlemagh. Random () is used to generate random numbers y:Math.random () * h, r:Math.random () * 5,})}.

3. Draw snowflake style

Function draw () {context.clearRect (0re0pl. Wjinh) context.beginPath () for (var item0; I