贝塞尔曲线

网络工具：http://www.j--d.com/bezier

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>贝塞尔曲线</title>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
</style>
<script type="text/javascript">
function Draw(){
   //获取js对象
   var c=document.getElementById("canvas");
   c.width=500;
   c.height=500;
   //获取用于绘制图形的2d环境
   var ctx=c.getContext("2d");
   ctx.lineWidth=6;
   ctx.strokeStyle="#ff0000";
   ctx.beginPath();
   //起点
   ctx.moveTo(100,200);
   //二次贝塞尔曲线
   //ctx.quadraticCurveTo(75,50,300,200);

   //三次贝塞尔曲线
   ctx.bezierCurveTo(205,56,239,439,429,236);
   ctx.stroke();



}

</script>
</head>
<body>
   <canvas id="canvas"></canvas>
   <input type="button" value="Canvas" onclick="Draw();"/>
</body>
</html>