HTML5中怎么用Canvas绘制各种线条

本篇内容介绍了“HTML5中怎么用Canvas绘制各种线条”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

本文介绍的所有内容都假定已经获得了Canvas对象，即假定已经在页面中含有下列代码：

<canvas id="mycanvas" width="500" height="500" style="border:1px #000 solid;"></canvas>

<script type="text/javascript">

var mycanvas = document.getElementById("mycanvas");

var ctx = mycanvas.getContext('2d');

</script>

在本节中，将重点使用path()、fill()和stroke()方法及其相关属性。

本文将详细介绍如何用canvas绘制各类线条，即直线、折线、弧线和曲线等，并提供相应的代码作为参考。

1. 直线

直线就是从A点到B点的一条线段。绘制直线的示例代码如下：

ctx.strokeStyle ="FF0000"; //线的颜色为红色

ctx.lineWidth=2; //线宽为2像素

ctx.beginPath(); //开始路径

ctx.moveTo(10, 10); //给路径一个起点

ctx.lineTo(100, 100); //给路径一个终点

ctx.stroke();

ctx.closePath(); //关闭路径

2. 折线

折线就是从A点到B点再到C点的一个线段。绘制折线的示例代码如下：

ctx.strokeStyle ="FF0000"; //线的颜色为红色

ctx.lineWidth=2; //线宽为2像素

ctx.beginPath(); //开始路径

ctx.moveTo(10, 10); //给路径一个起点

ctx.lineTo(400, 400); //给路径一个终点

ctx.moveTo(400, 400); //继承上一个起点

ctx.lineTo(200, 300); //再给路径一个终点

ctx.stroke();

ctx.closePath(); //关闭路径

3. 弧线

弧线就是从以A点为圆心，半径为B，角为C度的一段圆弧。绘制弧线的示例代码如下：

ctx.strokeStyle ="FF0000"; //线的颜色为红色

ctx.lineWidth=2; //线宽为2像素

ctx.arc(200,200,100,0,Math.PI*(1/2),false);

//绘制一条90&deg;的弧线，Math.PI等于180&deg;半圆周

//arc方法里用到的角度是以弧度为单位而不是度，度和弧度直接的转换可以用这个表达式：var radians =

//(Math.PI/180)*degrees。

//参数说明(x,y,半径, 起始角度,结束角度,是否为逆时针方向显示)，其中(x,y)是圆心坐标

ctx.stroke();

注意 上面代码中的arc方法的详细工作示意图如下图：

4. 曲线

曲线是一种复杂的弧线组合，涉及3种方法，即arcTo()、quadraticCurveTo()、bezier-CurveTo()。

本节只讲arcTo()，quadraticCurveTo()和bezierCurveTo()。

arcTo()方法用于画一条与两条射线相切的圆弧，其中一条射线穿过渲染上下文绘制起点，终点为 (x1, y1)；另一条射线穿过 (x2, y2)，终点为 (x1, y1)，这条圆弧为与这两条射线相切的最小的圆弧。在调用完arcTo()方法后，将圆弧与射线 (x1, y1) (x2, y2) 的切点添加到当前路径中，作为下次绘制的起点。

示例代码如下：

ctx.lineWidth=2;

ctx.strokeStyle = "#F00";

ctx.moveTo(10, 10);

ctx.arcTo(210, 60, 10, 210, 30);

ctx.stroke();

//上面的代码给出曲线，为了更好地辅助读者理解arcto()方法，特绘出两条射线的夹角

ctx.beginPath();

ctx.strokeStyle = "#000";

ctx.moveTo(10, 6);

ctx.lineTo(214, 60);

ctx.lineTo(10, 214);

ctx.stroke();

5. 二次方曲线

quadraticCurveTo()是二次方曲线获取方法，其详细的工作示意图如下：

示例代码如下：

ctx.lineWidth=2;

ctx.strokeStyle = "#F00";

ctx.moveTo(100,100);

ctx.quadraticCurveTo(125,225,225,166);

ctx.stroke();

在网上有人甚至给出了用quadraticCurveTo()做出会话气泡图形的案例，其代码如下：

ctx.lineWidth=2;

ctx.strokeStyle = "#F00";

ctx.moveTo(75,25);

ctx.quadraticCurveTo(25,25,25,62.5);

ctx.quadraticCurveTo(25,100,50,100);

ctx.quadraticCurveTo(50,120,30,125);

ctx.quadraticCurveTo(60,120,65,100);

ctx.quadraticCurveTo(125,100,125,62.5);

ctx.quadraticCurveTo(125,25,75,25);

ctx.stroke();

6. 贝塞尔曲线

贝塞尔曲线（Bezier curve）是数值分析和计算机图形学中相当重要的参数曲线。更高维度的贝塞尔曲线被称作贝塞尔曲面。

bezierCurveTo()方法比前面的quadraticCurveTo()方法多出了一个控制点，因此，表现更加丰富。

bezierCurveTo()方法的工作示意图如下图所示：

画一条贝塞尔曲线的具体代码如下：

ctx.lineWidth=2;

ctx.strokeStyle = "#F00";

ctx.moveTo(50,150);

ctx.bezierCurveTo(150,50,250,150,350,50);

ctx.stroke();

执行

在网上还有一个bezierCurveTo()的制作心形案例，此处也一并提供给大家参考：

ctx.lineWidth=2;

ctx.strokeStyle = "#F00";

ctx.moveTo(75,40);

ctx.bezierCurveTo(75,37,70,25,50,25);

ctx.bezierCurveTo(20,25,20,62.5,20,62.5);

ctx.bezierCurveTo(20,80,40,102,75,120);

ctx.bezierCurveTo(110,102,130,80,130,62.5);

ctx.bezierCurveTo(130,62.5,130,25,100,25);

ctx.bezierCurveTo(85,25,75,37,75,40);

ctx.stroke();

使用二次方和三次方贝塞尔曲线是相当有挑战的。因为不像在矢量绘图软件Adobe Illustrator 里那样有即时的视觉反馈，所以用它来画复杂图形比较麻烦。但是从理论上来说，任何复杂的图形都可以用贝塞尔曲线绘制出来。

注意 二次方转三次方是可能的，但是反之则不一定能行，仅当三次方程中的三次项为零时才可能转换为二次方贝塞尔曲线。通常可以用多条二次方曲线通过细分算法来近似模拟三次方贝塞尔曲线。

“HTML5中怎么用Canvas绘制各种线条”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！