zoukankan      html  css  js  c++  java
  • HTML5实战—canvas绘图之贝塞尔曲线

    1、二次贝塞尔曲线

      quadraticCurveTo(cpx,cpy,x,y)  //cpx,cpy表示控制点的坐标, x,y表示终点坐标;

    数学公式表示如下:

    二次方贝兹曲线的路径由给定点P0P1P2的函数Bt)追踪:

    mathbf{B}(t) = (1 - t)^{2}mathbf{P}_0 + 2t(1 - t)mathbf{P}_1 + t^{2}mathbf{P}_2 mbox{ , } t in [0,1]

    代码实例:

    复制代码
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>canvas直线</title>
    <meta name="Keywords" content="">
    <meta name="author" content="@my_programmer">
    <style type="text/css">
        body, h1{margin:0;}
        canvas{margin: 20px;}
    </style>
    </head>
    <body onload="draw()">
        <h1>二次贝塞尔曲线</h1>
        <canvas id="canvas" width=200 height=200 style="border: 1px solid #ccc;"></canvas>
    <script>
        function draw() {
            var canvas=document.getElementById('canvas');
            var context=canvas.getContext('2d');
             //绘制起始点、控制点、终点  
              context.beginPath();  
              context.moveTo(20,170);  
              context.lineTo(130,40);  
              context.lineTo(180,150);    
              context.stroke();            
    
              //绘制2次贝塞尔曲线  
              context.beginPath();  
              context.moveTo(20,170);  
              context.quadraticCurveTo(130,40,180,150); 
              context.strokeStyle = "red"; 
              context.stroke();          
    }
    </script>
    </body>
    </html>
    复制代码

    代码效果:

    2、三次贝塞尔曲线

      bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)  //cp1x,cp1y表示第一个控制点的坐标, cp2x,cp2y表示第二个控制点的坐标, x,y表示终点的坐标;

    数学公式表示如下:

    P0P1P2P3四个点在平面或在三维空间中定义了三次方贝兹曲线。曲线起始于P0走向P1,并从P2的方向来到P3。一般不会经过P1P2;这两个点只是在那里提供方向资讯。P0P1之间的间距,决定了曲线在转而趋进P3之前,走向P2方向的“长度有多长”。

    mathbf{B}(t)=mathbf{P}_0(1-t)^3+3mathbf{P}_1t(1-t)^2+3mathbf{P}_2t^2(1-t)+mathbf{P}_3t^3 mbox{ , } t in [0,1]

    代码实例:

    复制代码
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>canvas直线</title>
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <style type="text/css">
        body, h1{margin:0;}
        canvas{margin: 20px; }
    </style>
    </head>
    <body onload="draw()">
        <h1>三次贝塞尔曲线</h1>
        <canvas id="canvas" width=200 height=200 style="border: 1px solid #ccc;"></canvas>
    <script>
        function draw() {
            var canvas=document.getElementById('canvas');
            var context=canvas.getContext('2d');        
           //绘制起始点、控制点、终点  
           context.beginPath();  
           context.moveTo(25,175);  
           context.lineTo(60,80);  
           context.lineTo(150,30);  
           context.lineTo(170,150); 
           context.stroke();  
    
           //绘制3次贝塞尔曲线        
           context.beginPath();  
           context.moveTo(25,175);  
           context.bezierCurveTo(60,80,150,30,170,150);  
           context.strokeStyle = "red";  
           context.stroke();  
    }
    </script>
    </body>
    </html>
    复制代码

    代码效果图:

    【作者】:@挨踢前端
    【出处】:https://www.cnblogs.com/duanhuajian/archive/2012/10/15/2725096.html
    【声明】:所有博文标题后加(share)的表示收集的他人优秀文章,其余的则为原创。欢迎转载,但请在显要位置显示本文链接,并保留本段声明,否则追究法律责任,谢谢!
    如果真的不知道将来要做什么,索性就先做好眼前的事情。只要今天比昨天过得好,就是进步。长此以往,时间自然会还你一个意想不到的未来。
    生活像一个杯子。一开始,里面是空的,之后,要看你怎么对待它。如果你只往不如意的方面想,那么你最终辉得到一杯苦水。如果你往好的方面想,那么你最终会得到一杯清泉。
    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
  • 相关阅读:
    6 全局锁和表锁
    oracle ogg--ogg搭建过程中遇到的错误及处理
    5 深入浅出索引(下)
    4 深入浅出索引(上)
    oracle ogg 单实例双向-新增表,修改表结构(oracle-oracle
    oracle ogg 单实例双向复制搭建(oracle-oracle)--Oracle GoldenGate
    Iview 中 获取 Menu 导航菜单 选中的值
    idea中git分支的使用
    vue使用axios进行ajax请求
    web前端_Vue框架_设置浏览器上方的标题和图标
  • 原文地址:https://www.cnblogs.com/lipengze/p/14898270.html
Copyright © 2011-2022 走看看