HTML5实战—canvas绘图之贝塞尔曲线

最新推荐文章于 2024-01-18 11:30:09 发布

sinolzeng

最新推荐文章于 2024-01-18 11:30:09 发布

阅读量1.1k

点赞数

分类专栏： HTML/HTML5 文章标签： javascript html5

HTML/HTML5 专栏收录该内容

31 篇文章 3 订阅

订阅专栏

原文地址：http://www.cnblogs.com/duanhuajian/archive/2012/10/15/2725096.html

1、二次贝塞尔曲线

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

数学公式表示如下：

二次方贝兹曲线的路径由给定点P₀、P₁、P₂的函数B（t）追踪：

$\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 οnlοad="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表示终点的坐标；

数学公式表示如下：

P₀、P₁、P₂、P₃四个点在平面或在三维空间中定义了三次方贝兹曲线。曲线起始于P₀走向P₁，并从P₂的方向来到P₃。一般不会经过P₁或P₂；这两个点只是在那里提供方向资讯。P₀和P₁之间的间距，决定了曲线在转而趋进P₃之前，走向P₂方向的“长度有多长”。

$\mathbf{B}(t)=\mathbf{P}_0(1-t)^3+3\mathbf{P}_1t(1-t)^2+3\mathbf{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 οnlοad="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>

代码效果图：

sinolzeng

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5实战—canvas绘图之贝塞尔曲线

1、二次贝塞尔曲线　　quadraticCurveTo(cpx,cpy,x,y)　　//cpx，cpy表示控制点的坐标, x，y表示终点坐标；数学公式表示如下：二次方贝兹曲线的路径由给定点P0、P1、P2的函数B（t）追踪：
复制链接

扫一扫