canvas基础入门系列教程(5)-绘制曲线图形

最新推荐文章于 2024-08-16 15:33:06 发布

大地飞鸿

最新推荐文章于 2024-08-16 15:33:06 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/keledon/article/details/87114689

版权

javascript 同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

html5

10 篇文章 0 订阅

订阅专栏

3.绘制曲线图形

在canvas中曲线图形通常分为两种，曲线和弧线，弧线就是圆周上的一部分，曲线上每一点都有相同的曲率，曲线则不一定，曲线的范围更大，曲线包含率弧线

3.1.使用点来画曲线

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #cvs{
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <canvas width="600" height="300" id="cvs"></canvas>
  <script>
    var oCanvas = document.getElementById('cvs')
    var ctx = oCanvas.getContext('2d')
    ctx.moveTo(10, 100)
  
    for(var i = 10; i < 600; i++){
      var x = i;
      var y =  10 * Math.cos(x/10) + 100
      ctx.lineTo(x, y)
    }
    ctx.strokeStyle = "orangered"
    ctx.stroke()
  </script>
</body>
</html>

3.2.什么是弧度

在canvas中经常会用到弧度单位，在数学和物理中，弧度是角的度量单位，其定义为弧长等于半径的弧，其所对的圆心角为1弧度。

两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆的半径时，两条射线的夹角的弧度为1)。

根据定义我们知道了弧度的公式

1(弧度) = 180/Math.PI(角度)

在实际开发中，我们会经常遇到角度转成弧度的情况，因此，还需要知道1角度等于多少弧度

1(角度) = Math.PI/180弧度

举个例子，知道了角度为90度，那么弧度是多少呢

90*1(角度) = 90 * Math.PI/180(弧度)

从上面的例子中，我们得出下面的写法

180角度  等价于   180 * Math.PI/180 弧度
230角度  等价于   230 * Math.PI/180 弧度
......  
xxx角度  等价于   角度数 * Math.PI / 180 弧度

总结出一个规律，只要你知道了角度数，想把这个角度换成弧度，那么你直接用这个角度数乘以Math.PI 然后再除以 180就行了

3.3.arc方法

arc是绘制圆弧路径的方法。圆弧路径的圆心在 (x, y) 位置，半径为 r ，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。

//语法
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

参数说明

x  圆弧中心（圆心）的 x 轴坐标。
y  圆弧中心（圆心）的 y 轴坐标。
radius 圆弧的半径。
startAngle  圆弧的起始点， x轴方向开始计算，单位以弧度表示。
endAngle   圆弧的终点， 单位以弧度表示。
anticlockwise 可选的Boolean值 ，如果为 true，逆时针绘制圆弧，反之，顺时针绘制。

实例：绘制圆形

var oCanvas = document.getElementById('cvs')
var ctx = oCanvas.getContext('2d')
ctx.beginPath()
ctx.arc(100, 100, 150, 0, 360 * Math.PI / 180)
ctx.stroke()
ctx.closePath()

实例2: 绘制半圆

var oCanvas = document.getElementById('cvs')
var ctx = oCanvas.getContext('2d')
ctx.beginPath()
ctx.arc(100, 100, 150, 0, 180 * Math.PI / 180)
ctx.stroke()
ctx.closePath()

实例3: 填充圆形

var oCanvas = document.getElementById('cvs')
var ctx = oCanvas.getContext('2d')
ctx.beginPath()
ctx.arc(200, 150, 100, 0, 360 * Math.PI / 180)
ctx.closePath()
ctx.fillStyle = 'green'
ctx.fill()

3.4.arcTo方法

crtTo可以用来画圆弧，需要3个点确定两条直线，根据具体半径画一个和两条直线相切的圆，两个切点之间的圆弧就是artTo画出来的

//语法
ctx.arcTo(x1, y1, x2, y2, radius);

参数说明

x1 第一个控制点的 x 轴坐标。
y1 第一个控制点的 y 轴坐标。
x2 第二个控制点的 x 轴坐标。
y2 第二个控制点的 y 轴坐标。
radius 圆弧的半径。

实例：

var oCanvas = document.getElementById('cvs')
var ctx = oCanvas.getContext('2d')

ctx.beginPath()
ctx.fillStyle = 'green';
ctx.fillRect(150, 20, 10, 10);

ctx.beginPath()
ctx.fillStyle = 'red'
ctx.fillRect(150, 100, 10, 10);
ctx.fillRect(50, 20, 10, 10);

// 切线
ctx.beginPath()
ctx.setLineDash([5, 5])
ctx.moveTo(150, 20)
ctx.lineTo(150, 100)
ctx.lineTo(50, 20)
ctx.stroke()

ctx.beginPath()
ctx.setLineDash([])
ctx.moveTo(150, 20)
// 画圆弧
ctx.arcTo(150, 100, 50, 20, 30)
ctx.strokeStyle = 'orangered'
ctx.lineWidth = 5
ctx.stroke()

ctx.beginPath()
ctx.setLineDash([5, 5])
ctx.arc(120, 38, 30, 0 , 2 * Math.PI)
ctx.stroke()

3.5.贝塞尔曲线

百度百科解释：贝塞尔曲线就是这样的一条曲线，它是依据四个位置任意的点坐标绘制出的一条光滑曲线。在历史上，研究贝塞尔曲线的人最初是按照已知曲线参数方程来确定四个点的思路设计出这种矢量曲线绘制法。贝塞尔曲线的有趣之处更在于它的“皮筋效应”，也就是说，随着点有规律地移动，曲线将产生皮筋伸引一样的变换，带来视觉上的冲击。1962年，法国数学家Pierre Bézier第一个研究了这种矢量绘制曲线的方法，并给出了详细的计算公式，因此按照这样的公式绘制出来的曲线就用他的姓氏来命名是为贝塞尔曲线。

动态绘制贝塞尔曲线图: 在线演示

3.5.1.quadraticCurvaTo方法

使用quadraticCurveTo方法绘制二次贝塞尔曲线也需要三个点，开始点、控制点、结束点，通常使用moveTo或者lineTo方法来画开始点，quadraticCurveTo方法只接收两个点，控制点和结束点

// 语法

ctx.quadraticCurveTo(cpx, cpy, x, y)

参数说明

cpx 控制点的 x 轴坐标。
cpy 控制点的 y 轴坐标。
x  终点的 x 轴坐标。
y  终点的 y 轴坐标

实例：

var oCanvas = document.getElementById('cvs')
var ctx = oCanvas.getContext('2d')
ctx.moveTo(150, 100)
ctx.quadraticCurveTo(200,200, 250, 100)
ctx.stroke()

贝塞尔曲线绘制工具: 在线体验

3.5.2.bezierCurveTo方法

bezierCureTo方法用来实现三次贝塞尔曲线，和二次贝塞尔曲线不同的是，它需要两个控制点和一个结束点

// 语法
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

参数说明

cp1x 第一个控制点的 x 轴坐标。
cp1y 第一个控制点的 y 轴坐标。
cp2x 第二个控制点的 x 轴坐标。
cp2y 第二个控制点的 y 轴坐标。
x 结束点的 x 轴坐标。
y 结束点的 y 轴坐标。

实例：

var oCanvas = document.getElementById('cvs')
var ctx = oCanvas.getContext('2d')
ctx.moveTo(260,149)
ctx.bezierCurveTo(370, 138, 271, 246, 391, 246)
ctx.stroke()