导航：首页 > 开发技术 >

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

发表于：2026-11-03 作者：千家信息网编辑

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

千家信息网最后更新 2026年11月03日HTML5中怎么用Canvas绘制各种线条

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

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

在本节中，将重点使用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°的弧线，Math.PI等于180°半圆周

//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);