2.10.2_三次方贝赛尔曲线

来源：互联网发布：淘宝刷销量排名靠后编辑：程序博客网时间：2024/06/06 02:36
2.10.2_三次方贝赛尔曲线

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>三次方贝赛尔曲线</title>    </head>    <body>        <canvas id="canvas" width="1000" height="600"></canvas>    </body>    <script>        var canvas = document.getElementById('canvas');        var context = canvas.getContext('2d');        var endPoints = [{x:130,y:70},{x:430,y:270}];        var controlPoints = [{x:130,y:250},{x:250,y:70}];        //初始化        drawControlPoints();        drawEndPoints();        drawBezierCurve();        //绘制贝赛尔曲线        function drawBezierCurve(){            context.strokeStyle ='blue';            context.beginPath();            context.moveTo(endPoints[0].x,endPoints[0].y);            context.bezierCurveTo(controlPoints[0].x,controlPoints[0].y,                                  controlPoints[1].x,controlPoints[1].y,                                  endPoints[1].x,endPoints[1].y);            context.stroke();        }        //绘制结束点        function drawEndPoints(){            context.strokeStyle = 'blue';            context.fillStyle = 'red';            endPoints.forEach(function(point){                context.beginPath();                context.arc(point.x,point.y,5,0,Math.PI*2,false);                context.stroke();                context.fill();            });        }        //绘制控制点        function drawControlPoints(){            context.strokeStyle = 'yellow';            context.fillStyle = 'blue';            controlPoints.forEach(function(point){                context.beginPath();                context.arc(point.x,point.y,5,0,Math.PI*2,false);                context.stroke();                context.fill();            });        }    </script></html>
0 0