IT源码网

怎样绘制二次贝塞尔曲线

wyy 2021年03月09日 编程语言 446 0

需要使用: quadraticCurveTo(cp1x, cp1y, x, y);

cp1x: 控制点x坐标

cp1y: 控制点y坐标

x: 结束点x坐标

y: 结束点y坐标

 

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
 
<body> 
    <canvas id="canv" width="300" height="300"></canvas> 
    <script> 
        function draw() { 
            var canvas = document.getElementById('canv'); 
            if (!canvas.getContext) return; 
            var ctx = canvas.getContext("2d"); 
            ctx.beginPath(); 
            ctx.moveTo(10, 200); //起始点 
            //绘制二次贝塞尔曲线 
            ctx.quadraticCurveTo(40, 100, 200, 200); 
            ctx.stroke(); 
 
            // 为控制点作标记 
            ctx.beginPath(); 
            ctx.rect(10, 200, 10, 10); 
            ctx.rect(40, 100, 10, 10); 
            ctx.rect(200, 200, 10, 10); 
            ctx.fill(); 
 
        } 
        draw(); 
    </script> 
</body> 
 
</html>

 

注意: 贝塞尔曲线的两个定位点在两条直线上的速度是一样的.

 

评论关闭
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!