怎么使用HTML5的Canvas绘制曲线

今天小编给大家分享一下怎么使用HTML5的Canvas绘制曲线的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

Canvas2D自带的曲线方法

其实很多绘图工具中的简单曲线绘制都是使用贝兹曲线的，如果你用过windows自带绘图工具中的曲线就一定不陌生。可以先拖出一条直线，然后点击某个位置让直线扭曲。一开始的拖动动作就是决定曲线的两个顶点，点击动作就是添加中间点。在windows自带的绘图工具使用的是三次贝兹曲线，你可以添加两个中间点。贝兹曲线和一般的多项式插值不同，它的中间点只是作为控制点用的，并不是曲线必须经过的顶点。而且它还可以做出闭曲线。Canvas2D中有提供两个绘制曲线的方法

　　　　quadraticCurveTo：二次贝兹曲线

　　　　bezierCurveTo：三次贝兹曲线

　　线条是从当前所在位置开始画的，可以用moveTo方法来指定当前位置。有了曲线的开始位置后，还需要中间点和结束位置。把这些位置坐标传给绘制函数即可。比如二次贝兹曲线需要一个中间点和一个结束位置，所以要传两个坐标给quadraticCurveTo函数。坐标是由x和y组成的，也就是说这个函数有4个参数。bezierCurveTo也是一样的，只是它有两个中间点而已。下面咱就来用用看

CSS Code复制内容到剪贴板

<canvas id="canvas" width="200" height="200"></canvas>   

<script>   

var g=canvas.getContext("2d");   

//普通的直线   

g.beginPath();   

g.strokeStyle="#CCC";   

g.moveTo(0,0);   

g.lineTo(200,0);   

g.lineTo(0,200);   

g.lineTo(200,200);   

g.stroke();   

//贝兹曲线   

g.beginPath();   

g.strokeStyle="#F00";   

g.moveTo(0,0);   

g.bezierCurveTo(200,0, 0,200, 200,200);   

g.stroke();   

</script>  

这个按照Z字形的轨迹给定四个点，画出了普通的直线和贝兹曲线。这只是普通的曲线而已，贝兹曲线的厉害之处是它可以画出闭曲线，比如这样一段代码

CSS Code复制内容到剪贴板

g.beginPath();   

g.strokeStyle="#00F";   

g.moveTo(100,0);   

g.bezierCurveTo(-100,200, 300,200, 100,0);   

g.stroke();  

把三次贝兹曲线的开始位置和结束位置设置到同一点上就可以画出闭曲线。因为贝兹曲线的插值方向不是按照坐标轴走的，所以可以绘制出闭曲线。如果想让多项式插值绘制出闭曲线我们就得转换参数，使用极坐标系来完成。

以上就是“怎么使用HTML5的Canvas绘制曲线”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。