画布教程（3）绘制曲线

在画布教程之后绘制直线（2）我们知道如何在画布上绘制直线

这次我将为您带来与曲线有关的图形

在画布中，我们可以使用arc方法绘制一个圆

context.beginPath();
context.arc(x, y, r, startRadian, endRadian, antclockwise);
context.closePath();

我们是第一次使用beginPath和closePath方法. 首先，这两种方法分别称为开始路径和结束路径. 它们通常一起使用.

对于圆弧方法的参数，x和y表示圆心的坐标，r是圆的半径，startRadian和endRadian是起始角和终止角.

注意：这里是以弧度为单位的！

1π等于180度，所以在这里写时，通常写为度* Math.PI / 180，这样一眼便可以看出度是多少.

逆时针是指图形是否为逆时针. 默认值为false.

有些朋友会告诉我，我尝试过，写这三个句子没有效果. 这是怎么回事？肯定没有效果，因为这三个句子仅描述了一条路径！它没有画！因此，我们可以在绘制直线时使用“描边”描边或“填充”填充

行程三角形:

context.beginPath();
context.arc(x, y, r, startRadian, endRadian, antclockwise);
context.closePath();
context.strokeStyle = '颜色值';
context.stroke();
//描边 填充fill 同理  就不写了

圆弧是圆的一部分，那么如何绘制弧度？一个朋友发现我们的弧线也有弧度canvas画曲线图，

这只是一条连接两个弧度之间的点的直线，如果我删除该直线，它是否是一条曲线？答对了！就是这样，只要删除closePath，您就会发现绘制了弧线2333

那么画布实际上有一种绘制圆弧arcTo（x1，y1，x2，y2，半径）的方法;

要通过arcTo绘制圆弧，我们需要提供三个点的坐标. 起点通常由moveTo和lineTo提供.

x1和y1是控制点，x2和y2是端点，半径是圆弧的半径

arcTo（）方法将使用当前端点，端点1（x1，y1）和端点2（x2，y2）形成的角度.

然后在与该角度两侧相切且半径为半径的圆上绘制圆弧

圆弧的起点是当前端点和圆之间的切点

圆弧的终点是端点2（x2，y2）所在的边与圆之间的切线点，绘制的圆弧是两个切点之间的长度最短的圆弧.

如果当前端点不是弧线起点，arcTo()方法还将添加一条当前端点到弧线起点的直线线段。

我画一幅画

啊，别介意画家，仅此而已. 起点是我们的当前点是arcTo之前的点.

我将编写两段代码来演示起点和起点不一致.

    context.moveTo(50, 50);
    context.lineTo(150, 50);
    ctx.arcTo(200,50, 200,100, 50);
    ctx.stroke();

    context.moveTo(50, 50);
    ctx.arcTo(200,50, 200,100, 50);
    ctx.stroke();

结果是否相同！

仔细品尝差异，数学知识可以弥补差异

百度百科：贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具，如PhotoShop等。

让我们搜索更多. 由于主要的贝塞尔曲线是一条直线，因此我们在这里不再赘述. 让我们直接谈谈如何在画布上绘制辅助贝塞尔曲线.

cnavas提供了一种QuadraticCurveTo（x1，y1，x2，y2）方法，其中参数x1和y1是控制点，参数x2和y2是端点

起点是调用该方法之前的点

我无法绘制运动图像，但是我之前在网上找到了一个:

context.strokeStyle = 'red';
context.beginPath();
context.moveTo(0, 150);
context.quadraticCurveTo(75, 50, 200, 100);
context.stroke();
context.strokeStyle = 'green';
context.beginPath();
context.moveTo(75, 50);
context.lineTo(0, 150);
context.moveTo(75, 50);
context.lineTo(200, 100);
context.stroke();

代码效果:

三次贝塞尔曲线的方法是bezierCurveTo（x1，y1canvas画曲线图，x2，y2，x3，y3）

其中参数x1，y1，x2，y2是控制点，x3和y3是端点

只需再提供一个控制点即可！

绘制原理如下:

我不会写这个例子. 让我们以二次贝塞尔曲线为例并进行练习！

这次: 您学会了多少绘制圆，圆弧，二次贝塞尔曲线和三次贝塞尔曲线？

好的，本教程到此结束，下一次我将带给您线条和文本的操作.

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-152750-1.html