实现玫瑰曲线和心形图案的HTML5画布代码实例
本文主要介绍了HTML5的代码示例，实现了Rose曲线和心形模式，需要的朋友可以参考一下。设计素描 uff1a
提示：将代码复制到一个HTML文件中并保存它，并直接打开它查看效果。
实现代码：
复制代码代码如下所示：
HTML5演示
{ # apdiv1
位置：绝对；
宽度：120px；
身高：300px；
Z指数：1；
左：840px；
上图：80px；
}
您的浏览器不支持画布元素。
玫瑰曲线方程：
R = A +台盆（M / N××）
选择参数：
M：
n：
一个：
B：
函数绘图（）{
VaR CTX = document.getelementbyid（'canvas）。GetContext（二维的）；
Ctx.save（）；
（400300）ctx.translate；
Ctx.clearRect（400 - 300800600）；
ctx.strokestyle =# cc0000 ；
var a＝0，b＝1，m＝6，n＝1；
M =文件形式{ 0 }。m.value；
N =文件形式{ 0 }。价值；
a文件形式{ 0 }。值；
B =文件形式{ 0 }。答案；
DrawRose（CTX，A，B，M，N）；
Ctx.restore（）；
}
功能drawrose（CTX，A，B，M，N）{
Ctx.beginPath（）；
var = 0，C＝120；
var k = 2×math.pi / 360；
{做
VAR r = / B + math.sin（M * E / N×K）；
r＝r；
var x = R * Math.cos（E·K）；
var y = R * Math.sin（E·K）；
e＝0.1；
Ctx.lineTo（x，y）；
}（e＜4320）；
Ctx.stroke（）；
}
函数在河边画画（）{
VaR CTX = document.getelementbyid（'canvas）。GetContext（二维的）；
Ctx.save（）；
（400300）ctx.translate；
Ctx.clearRect（400 - 300800600）；
ctx.strokestyle =# cc0000 ；
Ctx.beginPath（）； / / ctx.moveto（0,0）；
var = 0，C＝150；
var k = 2×math.pi / 360；
{做
x = 150 * Math.cos（5／2×E×K）+ 50 * Math.cos（15 / 16×5 / 2×E×K）；
Y = 150 * Math.sin（5／2×E×K）- 50 * Math.sin（15 / 16×5 / 2×E×K）；
e＝0.1；
Ctx.lineTo（x，y）；
}（e＜3600）；
Ctx.stroke（）；
Ctx.restore（）；
}
功能draw3（）{
VaR CTX = document.getelementbyid（'canvas）。GetContext（二维的）；
Ctx.save（）；
（400300）ctx.translate；
Ctx.clearRect（400 - 300800600）；
ctx.strokestyle =# FF0000；
Ctx.beginPath（）；
变量x＝1，y；
{做
Y = 80 *（math.sqrt（1-x * x）+ math.pow（x * x，1 / 3））；
x＝0.001；
ctx.lineto（100 * x，y）；
}（x = 1）；
{做
Y = 80 *（math.sqrt（1-x××）- Math.pow（x * x，1 / 3））；
x＝0.001；
ctx.lineto（100 * x，y）；
}（x＜1）；
Ctx.closePath（）；
VaR研究= ctx.createradialgradient（- 40，- 60,10，- 40，- 40200）；
Grad.addColorStop（0，# ffcc00 ）；
Grad.addColorStop（1，# FF0000）；
ctx.fillstyle =毕业；
Ctx.fill（）；
（中风）；
Ctx.restore（）；
}
在window.onload =函数（）{
拉（）；
}