绘制曲线有几种思路：

1、通过quadraticCurveTo(controlX, controlY, endX, endY)方法来绘制二次曲线

2、通过bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY)方法，来绘制贝塞尔曲线

3、通过画圆的方法arc(x, y, radius, startAngle, endAngle, antiClockwise)来取得某一段圆弧，作为要画出的曲线

1、二次曲线quadraticCurveTo

　　quadraticCurveTo(cpx,cpy,x,y)　

　　二次曲线也称二次贝塞尔曲线或圆锥曲线或圆锥截线，是直圆锥面的两腔被一平面所截而得的曲线。当截面不通过锥面的顶点时，曲线可能是圆、椭圆、双曲线、抛物线。当截面通过锥面　　的顶点时，曲线退缩成一点、一直线或二相交直线。在截面上的直角坐标系(x,y)之下,这些曲线的方程是x,y的二元二次方程　

  • 参数1：控制点x
  • 参数2：控制到y
  • 参数3：结束点x
  • 参数4：结束点y

数学公式表示如下：

二次方贝兹曲线的路径由给定点P0、P1、P2的函数B（t）追踪：

代码实例：

<!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)　　

  • 参数1：控制点x1
  • 参数2：控制点y1
  • 参数3：控制点x2
  • 参数4：控制点y2
  • 参数5：结束点x
  • 参数6：结束点y

贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。当然在一些比较成熟的位图软件中也有贝塞尔曲线工具，如PhotoShop等。在Flash4中还没有完整的曲线工具，而在Flash5里面已经提供出贝塞尔曲线工具。

和二次曲线类似，它的函数是：bezierCurveTo()。贝塞尔曲线和二次曲线不同的是，它有2个控制点。二次曲线是有一个无形的控制点在拉动曲线，而贝塞尔曲线就是2个控制点在拉动曲线。

数学公式表示如下：

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

代码实例：

<!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>

代码效果图：

3、圆弧线

　　arc(x, y, radius, startAngle, endAngle, antiClockwise)

  • 参数1：圆心x
  • 参数2：圆心y
  • 参数3：半径
  • 参数4：开始弧度
  • 参数5：结束弧度
  • 参数6：是否为逆时针方向，默认false

　　所谓弧度就是一个圆周的一部分，可以用圆心（参数1、2）和圆的扇形半径（参数3）来表示。为了表示弧度的范围，必须定义弧度的起点（参数4）和终点（参数5），以及它的方向（参数6）。

示例一个简单的弧度：

<!DOCTYPE HTML>

<html>

<head>

<style>

#myCanvas

{

    border: 1px solid #9C9898;

}

</style>

</head>

<body>

<canvas id="myCanvas" width="600" height="300"></canvas>

<script>

function PI(deg)

{

    return deg/180*Math.PI;

}

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var pi=Math.PI;

context.beginPath();

context.arc(200, 200, 100, PI(-90), PI(0), false);

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

</script>

</body>

</html>

javascript -- canvas绘制曲线的更多相关文章

  1. canvas绘制曲线

    canvas绘制曲线 方法 quadraticCurveTo(cp1x, cp1y, x, y) 只有一个控制点的贝塞尔曲线(其实就是控制点分别与起始点和结束点连线的公切线) bezierCurveT ...

  2. JavaScript+canvas 绘制多边形

    效果图: <body> <canvas id="square" width="500"></canvas> <canv ...

  3. JavaScript+canvas 利用贝塞尔曲线绘制曲线

    效果图: <body> <canvas id="test" width="800" height="300">< ...

  4. canvas绘制贝塞尔曲线

    原文:canvas绘制贝塞尔曲线 1.绘制二次方贝塞尔曲线 quadraticCurveTo(cp1x,cp1y,x,y); 其中参数cp1x和cp1y是控制点的坐标,x和y是终点坐标 数学公式表示如 ...

  5. 怎样用JavaScript和HTML5 Canvas绘制图表

    原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...

  6. HTML5 Canvas绘制转盘抽奖

    新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...

  7. Canvas绘制图形

    1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  8. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  9. canvas贝塞尔曲线

    贝塞尔曲线 Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线. 曲线定义:起始点.终止点.控制点.通过调整控制点,贝塞尔曲线的形状会发生变化. 1962年,法国数学家Pierr ...

随机推荐

  1. 每天一个linux命令(5)：in命令

    ln是linux中又一个非常重要命令,它的功能是为某一个文件在另外一个位置建立一个同步的链接.当我们需要在不同的目录,用到相同的文件时,我们不需要在每一个需要的目录下都放一个必须相同的文件,我们只要在 ...

  2. java动态加载jar包，并运行其中的类和方法

    动态加载jar包,在实际开发中经常会需要用到,尤其涉及平台和业务的关系的时候,业务逻辑部分可以独立出去交给业务方管理,业务方只需要提供jar包,就能在平台上运行. 下面通过一个实例来直观演示: 第一: ...

  3. FFmpeg Basics学习笔记（2）

    帧率 fps的概念 帧率,单位FPS(frame per second), 用于衡量视频每秒的处理帧数,对于编码器而言说明编码器在1s的编码的速度,通常可以使用一帧的编码时间倒数简单计算:对于解码器而 ...

  4. JAVA-JSP内置对象之application对象获得服务器版本

    相关资料:<21天学通Java Web开发> application对象获得服务器版本1.通过application对象的getMajorVersion()方法和getMinorVersi ...

  5. 微服务之springCloud-config-bus(十三)

    简介 当我们的业务系统越来越庞大复杂的时候,各种配置就会层出不群.一旦配置修改了,那么我们就是必须修改后停服务,然后再上线,如果服务少,我们可以手动来操作,如果是成千上百的服务,如果是手动操作,肯定就 ...

  6. 虚拟机安装以及PCL的配置（2）

    那我们无论在虚拟机还是在双系统的Ubuntu环境下都是一样的安装过程 我们使用快捷键“ctrl+alt+T”,来打开一个命令窗口如下图 比如我们在命令窗口下输入ls 我们会看到在主目录下的所有文件 下 ...

  7. PCL中分割_欧式分割（1）

    基于欧式距离的分割和基于区域生长的分割本质上都是用区分邻里关系远近来完成的.由于点云数据提供了更高维度的数据,故有很多信息可以提取获得.欧几里得算法使用邻居之间距离作为判定标准,而区域生长算法则利用了 ...

  8. matlab中log函数与rssi转距离

    我们通常所说的log是指以10为底的对数,而MATLAB中的log却不是这样.Matlab中的log函数在默认情况下是以e为底,即loge,如果需要计算以10为底的对数,那么需要用log10()函数. ...

  9. 移动互联网App兼容性测试

    我建议大家也可以参考一些针对App监测和统计的网站,都非常有意义,具体如下: 友盟品牌手机排行榜  http://www.umeng.com/ 移动观象台   https://www.talkingd ...

  10. 6 ways to import data into SQL Server

    I’m going to go over some methods to import data from text files into SQL Server today. The particul ...