How to use Canvas to draw Heart Line and Rose Line dynamically in HTML5
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!
