コメント:HTML5キャンバスは、キャンバスを使用してベジエ曲線を簡単に描画するのが非常に強力です。これは、将来誰もが使用するのに便利です。これは特に実装コードと共有されます。このニーズを持っている友達はそれを参照できます。
効果を見る:完全なコード:
<!doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title> HTML5のキャンバスキャンバスを使用して、ベジエ曲線を描画します</title>
</head>
<body>
<div>
<a href = "http://keleyi.com/a/bjac/j77m9131.htm"ターゲット= "_ blank">元のテキスト</a> </div>
<canvas> </canvas>
<script type = "text/javascript">
関数描画(ID)
{
var canvas = document.getElementById(id);
if(canvas == null)
falseを返します。
var context = canvas.getContext( '2d');
context.fillstyle = "#eeeeff";
Context.FillRect(0,0,400,300);
var n = 0;
var dx = 150;
var dy = 150;
var s = 100;
context.beginpath();
Context.globalCompositeOperation = 'および';
Context.FillStyle = 'RGB(100,255,100)';
Context.Strokestyle = 'RGB(0,0,100)';
var x = math.sin(0);
var y = math.cos(0);
var dig = math.pi/15*11;
for(var i = 0; i <30; i ++)
{
var x = math.sin(i*dig);
var y = math.cos(i*dig);
Context.beziercurveto(dx+x*s、dy+y*s-100、dx+x*s+100、dy+y*s、dx+x*s、dy+y*s);
}
Context.ClosePath();
context.fill();
context.stroke();
}
draw( "keleyi_com");
</script>
</body>
</html>