html5绘制立体感线条,HTML5Canvas绘制各种线条

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

ctx.strokeStyle &＃61;"FF0000"; //线的颜色为红色

ctx.lineWidth&＃61;2; //线宽为2像素

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

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

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

ctx.stroke();

ctx.closePath(); //关闭路径效果图如下&＃xff1a;

2. 折线折线就是从A点到B点再到C点的一个线段。绘制折线的示例代码如下&＃xff1a;ctx.strokeStyle &＃61;"FF0000"; //线的颜色为红色

ctx.lineWidth&＃61;2; //线宽为2像素

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

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

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

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

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

ctx.stroke();

ctx.closePath(); //关闭路径效果图如下&＃xff1a;

3. 弧线

弧线就是从以A点为圆心&＃xff0c;半径为B&＃xff0c;角为C度的一段圆弧。绘制弧线的示例代码如下&＃xff1a;ctx.strokeStyle &＃61;"FF0000"; //线的颜色为红色

ctx.lineWidth&＃61;2; //线宽为2像素

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

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

//arc方法里用到的角度是以弧度为单位而不是度&＃xff0c;度和弧度直接的转换可以用这个表达式&＃xff1a;var radians &＃61;

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

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

ctx.stroke();

效果图如下&＃xff1a;

注意 上面代码中的arc方法的详细工作示意图如下图&＃xff1a;

4. 曲线

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

本节只讲arcTo()&＃xff0c;quadraticCurveTo()和bezierCurveTo()。

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

示例代码如下&＃xff1a;ctx.lineWidth&＃61;2;

ctx.strokeStyle &＃61; "#F00";

ctx.moveTo(10, 10);

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

ctx.stroke();

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

ctx.beginPath();

ctx.strokeStyle &＃61; "#000";

ctx.moveTo(10, 6);

ctx.lineTo(214, 60);

ctx.lineTo(10, 214);

ctx.stroke();

效果图如下&＃xff1a;

5. 二次方曲线

quadraticCurveTo()是二次方曲线获取方法&＃xff0c;其详细的工作示意图如下&＃xff1a;

示例代码如下&＃xff1a;ctx.lineWidth&＃61;2;

ctx.strokeStyle &＃61; "#F00";

ctx.moveTo(100,100);

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

ctx.stroke();

执行效果如下图&＃xff1a;

在网上有人甚至给出了用quadraticCurveTo()做出会话气泡图形的案例&＃xff0c;其代码如下&＃xff1a;ctx.lineWidth&＃61;2;

ctx.strokeStyle &＃61; "#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();

执行效果如下图&＃xff1a;

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

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

bezierCurveTo()方法的工作示意图如下图所示&＃xff1a;

画一条贝塞尔曲线的具体代码如下&＃xff1a;ctx.lineWidth&＃61;2;

ctx.strokeStyle &＃61; "#F00";

ctx.moveTo(50,150);

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

ctx.stroke();

执行效果图如下&＃xff1a;

在网上还有一个bezierCurveTo()的制作心形案例&＃xff0c;此处也一并提供给大家参考&＃xff1a;ctx.lineWidth&＃61;2;

ctx.strokeStyle &＃61; "#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();

执行效果如下图&＃xff1a;

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

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