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

This article mainly explains "how to use Canvas to dynamically draw heart-shaped lines and rose lines in HTML5". Interested friends may wish to have 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 Canvas to dynamically draw heart-shaped lines and rose lines in HTML5.

1. Heart line and rose line

To draw these two kinds of curves, first of all, we choose two parameter equations (the parameter equations of the heart line and the rose line are different, their morphological characteristics are also different, you can choose the appropriate parameter equation according to your needs)

The parameter equation of the heart-shaped line:

X = 16 (sin θ) ^ 3

Y = 13 cos θ-5 cos 2 θ-2 cos 3 θ-cos 4 θ

The parameter equation of the rose line:

X=sin4 θ × cos θ

Y=sin4 θ × sin θ

two。 Draw

Suppose we have a Canvas element in the html page whose Id is drawing. Note that the height and width of the Canvas set with the CSS style are only the height and width of the element display, not the height and width of the canvas, which is undivided, which is particularly important. When I first used it, I used Css to set up a canvas element with a width of 300px and a height of 300px. I wanted to draw a square, but the final result was a rectangle. the default size of the canvas was 300x150 and had not been changed. he scaled my drawing.

Then we select the Canvas element through Id, and we need to use the getContext () method to get the drawing context before drawing. Then the path is drawn according to the parameter equation, mainly using the lineTo () method. The code is as follows:

Function draw () {

Var drawing = document.getElementById ("drawing"); / / get canvas element

Drawing.width = '500 colors; / / set the canvas size

Drawing.height = '500'

If (drawing.getContext) {/ / get the drawing context

Var content = drawing.getContext ("2d")

Radian = 0, / / set the initial Radian

Radian_add = Math.PI/180; / / set Radian increment

Content.beginPath (); / / start drawing

Content.translate (250250); / / set the drawing origin

Content.moveTo (getX (radian), getY (radian)); / / move the drawing cursor to the origin

While (radian (2*Math.PI)) {/ / cancel the intermittent call after drawing a complete heart line

ClearInterval (intervalId)

}

}

IntervalId = setInterval (heart,100); / / set intermittent calls with interval of 100ms

}

}

At this point, I believe you have a deeper understanding of "how to use Canvas to dynamically draw heart-shaped lines and rose lines 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.