`
jswing
  • 浏览: 10724 次
社区版块
存档分类
最新评论

二次曲线和贝塞尔曲线

 
阅读更多

截图如下，拖动黄色控制点可以改变曲线：



 二次曲线代码：

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        var start = { x: 10, y: 150 }, ctl = { x: 100, y: 50 }, end = { x: 200, y: 150 };
        var mouseIndex = -1;
        function draw() {
            var ctx = document.getElementById("canvas").getContext("2d");
            ctx.clearRect(0, 0, 600, 500);
            ctx.lineWidth = 1;
            ctx.strokeStyle = "#000000";
            ctx.beginPath();
            //辅助连线
            ctx.moveTo(start.x, start.y);
            ctx.lineTo(ctl.x, ctl.y);
            ctx.lineTo(end.x, end.y);
            ctx.stroke();

            //曲线
            ctx.beginPath();
            ctx.strokeStyle = "#ff0000";
            ctx.lineWidth = 4;
            ctx.moveTo(start.x, start.y);
            ctx.quadraticCurveTo(ctl.x, ctl.y, end.x, end.y);
            ctx.stroke();

            //控制点
            ctx.beginPath();
            ctx.strokeStyle = "#000000";
            ctx.fillStyle = mouseIndex == 0 ? "rgba(250,250,0,1)" : "rgba(210,210,0,1)";
            ctx.lineWidth = 2;
            ctx.arc(start.x, start.y, 7, 0, 2 * Math.PI, false);
            ctx.fill();
            ctx.stroke();
            ctx.beginPath();
            ctx.fillStyle = mouseIndex == 1 ? "rgba(250,250,0,1)" : "rgba(210,210,0,1)";
            ctx.arc(ctl.x, ctl.y, 7, 0, 2 * Math.PI, false);
            ctx.fill();
            ctx.stroke();
            ctx.beginPath();
            ctx.fillStyle = mouseIndex == 2 ? "rgba(250,250,0,1)" : "rgba(210,210,0,1)";
            ctx.arc(end.x, end.y, 7, 0, 2 * Math.PI, false);
            ctx.fill();
            ctx.stroke();
        }
        function getRect(point) {
            return { x: point.x - 8, y: point.y - 8, width: 16, height: 16 };
        }
        function contains(rect, point) {
            return point.x > rect.x && point.x < rect.x + rect.width && point.y > rect.y && point.y < rect.y + rect.height;
        }
        function handleMove(event) {
            if (window.mousedown) {
                if (mouseIndex == 0) {
                    start = { x: event.offsetX, y: event.offsetY };
                } else if (mouseIndex == 1) {
                    ctl = { x: event.offsetX, y: event.offsetY };
                } else if (mouseIndex == 2) {
                    end = { x: event.offsetX, y: event.offsetY };
                }
                draw();
            } else {
                var newMouseIndex = mouseIndex;
                if (contains(getRect(start), { x: event.offsetX, y: event.offsetY })) {
                    newMouseIndex = 0;
                } else if (contains(getRect(ctl), { x: event.offsetX, y: event.offsetY })) {
                    newMouseIndex = 1;
                } else if (contains(getRect(end), { x: event.offsetX, y: event.offsetY })) {
                    newMouseIndex = 2;
                } else {
                    newMouseIndex = -1;
                }
                if (newMouseIndex !== mouseIndex) {
                    mouseIndex = newMouseIndex;
                    draw();
                }
            }
        }
    
    </script>
</head>
<body onload="draw()" onmousedown="window.mousedown=1" onmouseup="window.mousedown=0">
    <canvas id="canvas" width="600" height="500" onmousemove="handleMove(event)"></canvas>
</body>
</html>

 

 贝塞尔曲线：

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        var start = { x: 10, y: 150 }, ctl = { x: 100, y: 50 }, ctl2={x:200,y:200},end = { x: 300, y: 150 };
        var mouseIndex = -1;
        function draw() {
            var ctx = document.getElementById("canvas").getContext("2d");
            ctx.clearRect(0, 0, 600, 500);
            ctx.lineWidth = 1;
            ctx.strokeStyle = "#000000";
            ctx.beginPath();
            //辅助连线
            ctx.moveTo(start.x, start.y);
            ctx.lineTo(ctl.x, ctl.y);
            ctx.lineTo(ctl2.x, ctl2.y);
            ctx.lineTo(end.x, end.y);
            ctx.stroke();

            //曲线
            ctx.beginPath();
            ctx.strokeStyle = "#ff0000";
            ctx.lineWidth = 4;
            ctx.moveTo(start.x, start.y);
            ctx.bezierCurveTo(ctl.x, ctl.y, ctl2.x,ctl2.y,end.x, end.y);
            ctx.stroke();

            //控制点
            ctx.beginPath();
            ctx.strokeStyle = "#000000";
            ctx.fillStyle = mouseIndex == 0 ? "rgba(250,250,0,1)" : "rgba(210,210,0,1)";
            ctx.lineWidth = 2;
            ctx.arc(start.x, start.y, 7, 0, 2 * Math.PI, false);
            ctx.fill();
            ctx.stroke();
            ctx.beginPath();
            ctx.fillStyle = mouseIndex == 1 ? "rgba(250,250,0,1)" : "rgba(210,210,0,1)";
            ctx.arc(ctl.x, ctl.y, 7, 0, 2 * Math.PI, false);
            ctx.fill();
            ctx.stroke();
            ctx.beginPath();
            ctx.fillStyle = mouseIndex == 2 ? "rgba(250,250,0,1)" : "rgba(210,210,0,1)";
            ctx.arc(ctl2.x, ctl2.y, 7, 0, 2 * Math.PI, false);
            ctx.fill();
            ctx.stroke();
            ctx.beginPath();
            ctx.fillStyle = mouseIndex == 3 ? "rgba(250,250,0,1)" : "rgba(210,210,0,1)";
            ctx.arc(end.x, end.y, 7, 0, 2 * Math.PI, false);
            ctx.fill();
            ctx.stroke();
        }
        function getRect(point) {
            return { x: point.x - 8, y: point.y - 8, width: 16, height: 16 };
        }
        function contains(rect, point) {
            return point.x > rect.x && point.x < rect.x + rect.width && point.y > rect.y && point.y < rect.y + rect.height;
        }
        function handleMove(event) {
            if (window.mousedown) {
                if (mouseIndex == 0) {
                    start = { x: event.offsetX, y: event.offsetY };
                } else if (mouseIndex == 1) {
                    ctl = { x: event.offsetX, y: event.offsetY };
                } else if (mouseIndex == 2) {
                    ctl2 = { x: event.offsetX, y: event.offsetY };
                }else if (mouseIndex == 3) {
                    end = { x: event.offsetX, y: event.offsetY };
                }
                draw();
            } else {
                var newMouseIndex = mouseIndex;
                if (contains(getRect(start), { x: event.offsetX, y: event.offsetY })) {
                    newMouseIndex = 0;
                } else if (contains(getRect(ctl), { x: event.offsetX, y: event.offsetY })) {
                    newMouseIndex = 1;
                } else if (contains(getRect(ctl2), { x: event.offsetX, y: event.offsetY })) {
                    newMouseIndex = 2;
                } else if (contains(getRect(end), { x: event.offsetX, y: event.offsetY })) {
                    newMouseIndex = 3;
                }else {
                    newMouseIndex = -1;
                }
                if (newMouseIndex !== mouseIndex) {
                    mouseIndex = newMouseIndex;
                    draw();
                }
            }
        }
    
    </script>
</head>
<body onload="draw()" onmousedown="window.mousedown=1" onmouseup="window.mousedown=0">
    <canvas id="canvas" width="600" height="500" onmousemove="handleMove(event)"></canvas>
</body>
</html>
 

 

  • 大小: 8.6 KB
分享到：
HTML5 Canvas画时钟
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    c# 二次贝塞尔曲线算法

    1. **控制点的影响**：通过调整控制点的位置，可以改变二次贝塞尔曲线的形状和走向。控制点与起点或终点距离的远近会影响曲线的弯曲程度。 2. **参数 t 的作用**：参数 \( t \) 决定了曲线上哪个点被计算出来。当 \...

    2次贝塞尔曲线算法

    **二次贝塞尔曲线算法详解** 二次贝塞尔曲线是计算机图形学中常用的一种平滑曲线生成方法，它由三个点定义：起始点P0、结束点P2以及一个控制点P1。通过这三个点，我们可以计算出一系列点，这些点连接起来形成的曲线...

    c#/WPF二次贝塞尔曲线

    二次贝塞尔曲线是一种由两个控制点和一个起始点及结束点定义的参数曲线。这种曲线在图形设计、计算机图形学和游戏开发等领域广泛使用，因为它可以提供灵活的形状控制。二次贝塞尔曲线的数学表达式如下： \[ B(t) = ...

    java 二次贝塞尔曲线算法

    java 二次贝塞尔曲线算法，根据起点、终点和控制点输出点集合

    二次贝塞尔曲线算法（TC）

    用TC生存二次贝塞尔曲线，其实稍微改一下就可以实现三次贝塞尔曲线的了。

    VC++三次样条插值和贝塞尔曲线实例程序.zip_VC++ 三次样条_vc 贝塞尔曲线_三次样条曲线_曲线插值_贝塞尔曲线

    在二维空间中，贝塞尔曲线由四个点（两个端点和两个控制点）定义，而在三维空间中，这个数字会增加到七个。贝塞尔曲线的一个重要特性是，通过改变控制点的位置，可以直接影响曲线的形状和弯曲程度，这为设计师提供了...

    BezierCurve 贝塞尔曲线计算 c++源码

    综上所述，这个"BezierCurve 贝塞尔曲线计算 c++源码"项目提供了C++实现的贝塞尔曲线算法，支持二维和三维数据，适合学习者了解和实践贝塞尔曲线的计算方法，也可以作为其他软件开发中需要用到曲线功能的参考。

    贝塞尔曲线_贝塞尔曲线_

    更复杂的有二次贝塞尔曲线，涉及三个点：起点、终点和一个控制点，以及三次贝塞尔曲线，包含四个点：起点、终点及两个控制点。贝塞尔曲线的数学公式是基于伯恩斯坦多项式，通过对各个控制点的权重进行加权平均计算...

    bezier曲线平滑C语言代码-贝塞尔曲线C语言实现-bezier曲线平滑-曲线拟合-贝塞尔曲线

    这是一份C语言版本的bezier曲线（贝塞尔曲线）绘制代码，实现了二次和三次bezier曲线的绘制，可用于一系列给定的离散点的曲线平滑。此代码封装成函数，可以直接调用。脚本里边有参数和代码的注释，可供使用者学习和...

    OpenGL的B样条、贝塞尔曲线和贝塞尔曲面

    在OpenGL中，B样条、贝塞尔曲线和贝塞尔曲面是重要的数学工具，用于构建和绘制平滑连续的曲线和曲面。 B样条（B-Spline）是一种灵活的非均匀有理B样条（NURBS）的基础。它们通过控制点来定义，并具有局部修改的特性...

    HTML实现贝塞尔曲线

    路径数据由一系列命令和参数组成，其中`C`（对于三次贝塞尔曲线）或`Q`（对于二次贝塞尔曲线）命令用于定义控制点和结束点。 例如，一个简单的二次贝塞尔曲线可以这样表示： ```javascript var path = document....

    贝塞尔曲线原理及其算法实现

    3. **统一方法**：贝塞尔曲线的表示方式可以统一处理不同类型的曲线，如直线、二次曲线（抛物线、椭圆部分）和三次曲线。这意味着，无论曲线的复杂程度如何，处理和编辑的方法保持一致，减少了学习曲线，并提高了...

    用Opengl实现三次贝塞尔曲线

    如线性不等价性（改变控制点的位置不会改变曲线的形状）、平滑性（曲线在控制点处的切线可通过相邻控制点确定）和可分解性（任何三次贝塞尔曲线都可以拆分成两个二次贝塞尔曲线），对于理解和绘制更复杂的图形路径都...

    使用delphi演示贝塞尔曲线的绘制

    根据控制点的数量，贝塞尔曲线可以分为线性贝塞尔曲线（两个控制点）、二次贝塞尔曲线（三个控制点）和三次贝塞尔曲线（四个控制点）。更复杂的曲线可以通过连接多个贝塞尔曲线段来实现。 在Delphi中，使用...

    Unity3D 二次贝塞尔曲线（附工程源码）

    二次贝塞尔曲线是贝塞尔曲线家族中的一种，适用于构建各种复杂的动画效果和游戏场景。这次我们将深入探讨Unity3D中的二次贝塞尔曲线，并通过提供的工程源码进行实践。 首先，我们需要理解什么是贝塞尔曲线。贝塞尔...

    贝塞尔曲线计算器

    对于二次贝塞尔曲线（两个控制点和一个起点与终点），参数方程为： B(t) = (1 - t)^2 * P0 + 2 * (1 - t) * t * P1 + t^2 * P2 而对于三次贝塞尔曲线（三个控制点和一个起点与终点），参数方程为： B(t) = (1 - t)^...

    曲线处理—贝塞尔曲线程序

    一条线性贝塞尔曲线由两个端点和两个控制点决定，而二次贝塞尔曲线则涉及三个控制点，三次贝塞尔曲线有四个控制点。更高级的贝塞尔曲线可以通过组合多个较低次的贝塞尔曲线来实现。 在计算机图形学中，贝塞尔曲线的...

    Android贝塞尔曲线绘制心形

    在Android中，`Path`类提供了`quadTo()`（二次贝塞尔曲线）和`cubicTo()`（三次贝塞尔曲线）方法来绘制这些曲线。 心形通常由两个相互连接的二次或三次贝塞尔曲线构成，每个曲线代表心形的一半。为了构建这样的心形...

    贝塞尔曲线画特殊线条总结

    2. **二次贝塞尔曲线**：由三个点P0、P1和P2构成，其中P0和P2是端点，P1是控制点。二次贝塞尔曲线可以通过改变控制点的位置来控制曲线的弯曲程度。 3. **三次贝塞尔曲线**：最常用的一种，由四个点P0、P1、P2和P3...

    iOS贝塞尔曲线制作动画进度条，一次二次曲线

    应用贝塞尔曲线与NSTimer结合使用 制作动态进度条。 简单实用，易懂，易学习 贝塞尔一次二次曲线的简单绘制，应用。 供各位童鞋学习使用分享 Q：305814832 email:ioszhaoyi@163.com

Magicbox
Global site tag (gtag.js) - Google Analytics