How to realize Rose Curve and Heart pattern by HTML5 Canvas

This article mainly introduces HTML5 Canvas how to achieve the rose curve and heart-shaped pattern, the article is very detailed, has a certain reference value, interested friends must read it!

Tip: copy the code to a html file and save it, and you can see the effect by opening it directly.

Implementation code:

HTML5 demo

# apDiv1 {

Position:absolute

Width: 120 pixels

Height: 300 pixels

Z-index:1

Left: 840px

Top: 80px

}

Your browser does not support canvas elements.

The function draw () {var ctx = document.getElementById ('canvas'). GetContext ('2d'); ctx.save (); ctx.translate (400300); ctx.clearRect (- 400 copyright 300800600); ctx.strokeStyle = "# cc0000"

Var a = 0 ~ (th) b = 1 ~ (th) m = 6 ~ (th) n = 1

M = document.forms [0] .m.value

N = document.forms [0] .n.value

A = document.forms [0] .a.value

B = document.forms [0] .b.value

DrawRose (ctx,a,b,m,n)

Ctx.restore ()

}

Function drawRose (ctx,a,b,m,n) {

Ctx.beginPath ()

Var e = 0BZ c = 120m

Var k = 2 * Math.PI / 360

Do {

Var r = a / b + Math.sin (m * e / n * k)

R = r * c

Var x = r * Math.cos (e * k)

Var y = r * Math.sin (e * k)

E + = 0.1

Ctx.lineTo (XBI y)

} while (e