html画布直线代码,HTML5Canvas绘制各种线条本⽂介绍的所有内容都假定已经获得了Canvas对象，即假定已经在页⾯中含有下列代码：
var mycanvas = ElementById("mycanvas");
var ctx = Context('2d');
在本节中，将重点使⽤path()、fill()和stroke()⽅法及其相关属性。
本⽂将详细介绍如何⽤canvas绘制各类线条，即直线、折线、弧线和曲线等，并提供相应的代码作为参考。
1. 直线
直线就是从A点到B点的⼀条线段。绘制直线的⽰例代码如下：
ctx.strokeStyle ="FF0000"; //线的颜⾊为红⾊
ctx.lineWidth=2; //线宽为2像素
ctx.beginPath(); //开始路径
ctx.lineTo(100, 100); //给路径⼀个终点
ctx.stroke();
ctx.closePath(); //关闭路径
2. 折线
折线就是从A点到B点再到C点的⼀个线段。绘制折线的⽰例代码如下：
ctx.strokeStyle ="FF0000"; //线的颜⾊为红⾊
ctx.lineWidth=2; //线宽为2像素
ctx.beginPath(); //开始路径
ctx.lineTo(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.arcTo(210, 60, 10, 210, 30);
ctx.stroke();
//上⾯的代码给出曲线，为了更好地辅助读者理解arcto()⽅法，特绘出两条射线的夹⾓
ctx.beginPath();
ctx.strokeStyle = "#000";
ctx.lineTo(214, 60);
ctx.lineTo(10, 214);
ctx.stroke();
5. ⼆次⽅曲线
quadraticCurveTo()是⼆次⽅曲线获取⽅法，其详细的⼯作⽰意图如下：
⽰例代码如下：
ctx.lineWidth=2;
ctx.strokeStyle = "#F00";
ctx.quadraticCurveTo(125,225,225,166);
ctx.stroke();
在⽹上有⼈甚⾄给出了⽤quadraticCurveTo()做出会话⽓泡图形的案例，其代码如下：
ctx.lineWidth=2;
ctx.strokeStyle = "#F00";
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.bezierCurveTo(150,50,250,150,350,50);
ctx.stroke();
执⾏
在⽹上还有⼀个bezierCurveTo()的制作⼼形案例，此处也⼀并提供给⼤家参考：
ctx.lineWidth=2;
ctx.strokeStyle = "#F00";
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 ⾥那样有即时的视觉反馈，所以⽤它来画复杂图形⽐较⿇烦。但是从理论上来说，任何复杂的图形都可以⽤贝塞尔曲线绘制出来。
注意 ⼆次⽅转三次⽅是可能的，但是反之则不⼀定能⾏，仅当三次⽅程中的三次项为零时才可能转换
为⼆次⽅贝塞尔曲线。通常可以⽤多条⼆次⽅曲线通过细分算法来近似模拟三次⽅贝塞尔曲线。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论