首页 > 代码库 > 贝塞尔曲线

贝塞尔曲线

网络工具: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="http://www.mamicode.com/Canvas" onclick="Draw();"/>
</body>
</html>

贝塞尔曲线