关注我们

HTML5 中的 Drawing Lines函数

Line 方法

无涯教程需要以下方法在画布上绘制线条-

产品编号。	方法和描述
1	beginPath() 此方法重置当前路径。链接：https://www.learnfk.comhttps://www.learnfk.com/html5/canvas-drawing-lines.html 来源：LearnFk无涯教程网
2	moveTo(x，y) 此方法使用给定的点创建一个新的子路径。
3	closePath() 此方法将当前子路径标签为已关闭，并以与新关闭的子路径的起点和终点相同的点开始新的子路径。
4	fill() 此方法使用当前的填充样式填充子路径。
5	stroke() 此方法以当前笔触样式描边子路径。
6	lineTo(x，y) 此方法将给定点添加到当前子路径，该子路径通过一条直线连接到前一个子路径。

下面是一个简单的示例，该示例利用上述方法绘制三角形。

<!DOCTYPE HTML>

<html>
   <head>
      
      <style>
         #test {
            width: 100px;
            height:100px;
            margin: 0px auto;
         }
      </style>
      
      <script type="text/javascript">
         function drawShape() {
            
            //使用 DOM 获取画布元素
            var canvas=document.getElementById('mycanvas');
            
            //连接数据库凭据
            if (canvas.getContext) {
            
               //确保不支持画布时不执行
               var ctx=canvas.getContext('2d');
            
               //实心三角形
               ctx.beginPath();
               ctx.moveTo(25,25);
               ctx.lineTo(105,25);
               ctx.lineTo(25,105);
               ctx.fill();
            
               //描边三角形
               ctx.beginPath();
               ctx.moveTo(125,125);
               ctx.lineTo(125,45);
               ctx.lineTo(45,125);
               ctx.closePath();
               ctx.stroke();
            } else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>
   
   <body id="test" onload="drawShape();">
      <canvas id="mycanvas"></canvas>
   </body>
   
</html>

上面的示例将绘制以下形状-

有几个属性使无涯教程可以设置线条样式。

序列号	属性和说明
1	lineWidth [=value] 此属性返回当前线宽，可以对其进行设置以更改线宽。
2	lineCap [=value] 此属性返回当前的线帽样式，可以对其进行设置以更改线帽样式。
3	lineJoin [=value] 此属性返回当前的线连接样式，可以对其进行设置以更改线连接样式。
4	miterLimit [=value] 此属性返回当前的斜接极限比，可以进行设置以更改斜接极限比。

下面是一个简单的示例，该示例利用 lineWidth 属性绘制不同宽度的线。

<!DOCTYPE HTML>

<html>
   <head>
      
      <style>
         #test {
            width: 100px;
            height:100px;
            margin: 0px auto;
         }
      </style>
      
      <script type="text/javascript">
         function drawShape() {
            
            //使用 DOM 获取画布元素
            var canvas=document.getElementById('mycanvas');
            
            //连接数据库凭据
            if (canvas.getContext) {
               
               //确保不支持画布时不执行
               var ctx=canvas.getContext('2d');
               
               for (i=0;i<10;i++){
                  ctx.lineWidth=1+i;
                  ctx.beginPath();
                  ctx.moveTo(5+i*14,5);
                  ctx.lineTo(5+i*14,140);
                  ctx.stroke();
               }
            } else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>
   
   <body id="test" onload="drawShape();">
      <canvas id="mycanvas"></canvas>
   </body>
</html>