コメント:この記事では、主に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>