Комментарий: HTML5 Canvas очень мощный для использования своего холста, чтобы легко нарисовать кривые Безера, что удобно для каждого использования в будущем. Это особенно передается с кодом реализации. Друзья, которые имеют эту потребность, могут обратиться к этому.
Посмотреть эффект:Полный код:
<! 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">
<голова>
<Title> Draw Bezier Curves с использованием Canvas Canvas HTML5 </title>
</head>
<тело>
<div>
<a href = "http://keleyi.com/a/bjac/j77m9131.htm" target = "_ blank"> исходный текст </a> </div>
<Canvas> </canvas>
<script type = "text/javascript">
Функция рисовать (id)
{
var canvas = document.getElementbyId (id);
if (canvas == null)
вернуть ложь;
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;
для (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>