コメント：この記事では、主にHTML5キャンバスのコード例を紹介して、バラ曲線とハート型のパターンを実装しています。それを必要とする友達はそれを参照できます。
複製画像：
ヒント：コードをHTMLファイルにコピーして保存し、直接開いて効果を確認します。
実装コード：
<！doctype html>
<html>
<head>
<メタcharset = "gbk">
<title> html5 demo </title>
<style type = "text/css">
＃apdiv1 {
位置：絶対;
幅：120px;
高さ：300px;
z-index：1;
左：840px;
トップ：80px;
}
</style>
</head>
<body>
<canvas>
ブラウザはCanvas要素をサポートしていません。 </canvas>
<div>
<form>
バラ曲線方程式：
r = a+bsin（m/n*x）
パラメーターを選択します：
m：<入力型= "number" min = "2" max = "29" value = "29"/>
n：<入力型= "number" min = "1" max = "12" value = "11"/>
a：<入力型= "number" min = "0" max = "5" value = "1"/>
b：<入力型= "number" min = "1" max = "7" value = "5"/>
<入力型= "button" value = "draw">
<hr>
<入力型= "ボタン"値= "描画2">
<hr>
<入力型= "ボタン"値= "ハートチャート">
</form>
</div>
<script type = "text/javascript">
関数draw（）{
var ctx = document.getElementById（ 'canvas'）。getContext（ '2d'）;
ctx.save（）;
ctx.translate（400,300）;
CTX.ClearRect（-400、-300,800,600）;
ctx.strokestyle = "＃cc0000";
var a = 0、b = 1、m = 6、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（）;
}
関数ドローローズ（CTX、A、B、M、N）{
ctx.beginpath（）;
var e = 0、c = 120;
var k = 2 * math.pi / 360;
する {
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（x、y）;
} while（e <= 4320）;
ctx.stroke（）;
}
関数draw2（）{
var ctx = document.getElementById（ 'canvas'）。getContext（ '2d'）;
ctx.save（）;
ctx.translate（400,300）;
CTX.ClearRect（-400、-300,800,600）;
ctx.strokestyle = "＃cc0000";
ctx.beginpath（）; //ctx.moveto(0,0）;
var e = 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）;
} while（e <= 3600）;
ctx.stroke（）;
ctx.restore（）;
}
関数draw3（）{
var ctx = document.getElementById（ 'canvas'）。getContext（ '2d'）;
ctx.save（）;
ctx.translate（400,300）;
CTX.ClearRect（-400、-300,800,600）;
ctx.strokestyle = "＃ff0000";
ctx.beginpath（）;
var x = 1、y;
する {
y = -80*（math.sqrt（1 -x*x） + math.pow（x*x、1/3））;
x - = 0.001;
ctx.lineto（100*x、y）;
} while（x> = -1）;
する {
y = 80*（math.sqrt（1 -x*x）-math.pow（x*x、1/3））;
x += 0.001;
ctx.lineto（100*x、y）;
} while（x <= 1）;
ctx.closepath（）;
var grad = ctx.createradialgradient（-40、-60,10、-40、-40,200）;
Grad.AddColorStop（0、 "＃ffcc00"）;
Grad.AddColorStop（1、 "＃ff0000"）;
ctx.fillstyle = grad;
ctx.fill（）;
// ctx.stroke（）;
ctx.restore（）;
}
window.onload = function（）{
描く（）;
}
</script>
</body>
</html>