의견 : 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">
<헤드>
<title> html5의 캔버스 캔버스를 사용하여 베 지어 곡선을 그립니다. </title>
</head>
<body>
<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;
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 ();
}
드로우 ( "keleyi_com");
</스크립트>
</body>
</html>