Kommentar: HTML5 -Leinwand ist sehr leistungsfähig, um seine Leinwand leicht zu verwenden, um Bezier -Kurven zu zeichnen, was für alle in Zukunft bequem ist. Dies wird besonders an den Implementierungscode geteilt. Freunde, die diesen Bedarf haben, können sich darauf beziehen.
Den Effekt anzeigen:Vollständiger Code:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<title> Bezier -Kurven mithilfe von HTML5 -Leinwand Canvas </title>
</head>
<body>
<div>
<a href = "http://keleyi.com/a/bjac/j77m9131.htm" target = "_ leer"> Originaltext </a> </div>
<Canvas> </canvas>
<script type = "text/javaScript">
Funktionsabzug (ID)
{
var canvas = document.getElementById (id);
if (canvas == null)
false zurückgeben;
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 = 'und';
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;
für (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>