HTML5 Canvas 教程二


1.2.1 画直线

画直线的功能可以用 beginPath(), moveTo(), lineTo() 和 stroke() 几个方法的组合来实现。如:

<script>   context.beginPath();   context.moveTo(x,y);   context.lineTo(x,y);   context.stroke(); </script>

效果图

 

代码

<!DOCTYPE HTML>

<html>

  <head>

    <style>       body {         margin: 0px;         padding: 0px;

      }

      #myCanvas {

        border: 1px solid #9C9898;

      }

    </style>     <script>

      window.onload = function() {

        var canvas = document.getElementById("myCanvas");         var context = canvas.getContext("2d");

 

        context.beginPath();         context.moveTo(100, 150);         context.lineTo(450, 50);         context.stroke();

      };

 

    </script>

  </head>

  <body>

    <canvas id="myCanvas" width="578" height="200"></canvas>

  </body>

</html>

关于画直线的有关说明

方法 beginPath() 定义了一个新的路径绘制动作的开始。

方法 moveTo() 为指定点创建了一个新的子路径,这个点就变成了新的上下文点。我们可以把

moveTo() 方法看成用来定位我们的绘图鼠标用的。

方法 lineTo() 以上下文点为起点,到方法参数中指定的点之间画一条直线。

方法 stroke() 为所画的线赋予颜色,并使其可见。如果没有特别的指定颜色的话,则默认使用黑

色画直线。

1.2.2 直线的宽度

直线的宽度用lineWidth 属性设定。如:

<script>

  context.lineWidth = 5; </script>

效果图

 

代码

<!DOCTYPE HTML>

<html>

  <head>

    <style>       body {         margin: 0px;         padding: 0px;

      }

      #myCanvas {

        border: 1px solid #9C9898;

      }

    </style>     <script>

      window.onload = function() {

        var canvas = document.getElementById("myCanvas");         var context = canvas.getContext("2d");

 

        context.beginPath();         context.moveTo(100, 150);         context.lineTo(450, 50);         context.lineWidth = 15;         context.stroke();

      };

 

    </script>

  </head>

  <body>

    <canvas id="myCanvas" width="578" height="200"></canvas>

  </body>

</html>

1.2.3 直线颜色

直线的颜色用 strokeStyle 属性设定。

如:

<script>

  context.strokeStyle = 'blue'; </script>

效果图

 

代码

<!DOCTYPE HTML>

<html>

  <head>

    <style>       body {         margin: 0px;         padding: 0px;

      }

      #myCanvas {

        border: 1px solid #9C9898;

      }

    </style>     <script>

      window.onload = function() {

        var canvas = document.getElementById("myCanvas");         var context = canvas.getContext("2d");

 

        context.beginPath();         context.moveTo(100, 150);         context.lineTo(450, 50);         context.lineWidth = 10;

 

        // 设置线的颜色

        context.strokeStyle = "#ff0000";         context.stroke();

      };

 

    </script>

  </head>

  <body>

    <canvas id="myCanvas" width="578" height="200"></canvas>

  </body>

</html>

1.2.4 直线端点样式

HTML5 canvas支持3种直线的端点样式,包括: butt, round, 和 square。 设定端点样式是用lineCap属性设定。缺省情况下,将使用butt样式。如:

<script>

  context.lineCap = 'round'; </script>

注意:在使用 round 或 square 样式的时候,直线的长度会增加,具体增加的长度等于线的宽度。比如,一条长200px,宽10px的直线,如果使用 round 或 square 样式,由于每个端点增加了 5px,则直线的实际长度会达到210px。效果图,分别为ButtRound Square

 

代码

<!DOCTYPE HTML>

<html>

  <head>

    <style>       body {         margin: 0px;         padding: 0px;

      }

      #myCanvas {

        border: 1px solid #9C9898;

      }

    </style>     <script>

      window.onload = function() {

        var canvas = document.getElementById("myCanvas");

        var context = canvas.getContext("2d");

 

        // 最上面的线是butt样式         context.beginPath();

        context.moveTo(200, canvas.height / 2 - 50);

        context.lineTo(canvas.width - 200, canvas.height / 2 - 50);

        context.lineWidth = 20;         context.strokeStyle = "#0000ff";         context.lineCap = "butt";         context.stroke();

 

        // 中间的线是round样式         context.beginPath();

        context.moveTo(200, canvas.height / 2);

        context.lineTo(canvas.width - 200, canvas.height / 2);         context.lineWidth = 20;         context.strokeStyle = "#0000ff";         context.lineCap = "round";         context.stroke();

 

        // 最下面的是square样式         context.beginPath();

        context.moveTo(200, canvas.height / 2 + 50);

        context.lineTo(canvas.width - 200, canvas.height / 2 + 50);

        context.lineWidth = 20;         context.strokeStyle = "#0000ff";         context.lineCap = "square";         context.stroke();

      };

 

    </script>

  </head>

  <body>

    <canvas id="myCanvas" width="578" height="200"></canvas>

  </body>

</html>

上一篇 下一篇

评论



分享