HTML5 Canvas 教程四


1.4.1 画路径

路径是由多条子路径连接构成的。每条子路径的终止点就将作为新的上下文点。我们可以使用

lineTo(), arcTo(), quadraticCurveTo() 和 bezierCurveTo() 创建新的子路径。每次要开始画一条路径的时候就要使用 beginPath() 方法。

如:

<script>   context.beginPath();

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

        // 第一条直线

        context.lineTo(200, 160);

        // 二次曲线

        context.quadraticCurveTo(230, 200, 250, 120);

        // 贝塞尔曲线

        context.bezierCurveTo(290, -40, 300, 200, 400, 150);

        // 第二条直线

        context.lineTo(500, 90);

        context.lineWidth = 5;         context.strokeStyle = "blue";         context.stroke();       };

    </script>

  </head>

  <body>

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

  </body>

</html>

关于路径的说明

 

1.4.2 线条的连接样式

HTML5 canvas支持3种线条的连接样式,包括: miter, round, 和 bevel。 设定连接样式是用 lineJoin 属性设定。缺省情况下,将使用 miter 样式。

如:

<script>

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

注意:如果线条比较细,而且之间的连接并不形成很尖锐的角度,那么不同的连接样式之间可能会

比较难以区分。

效果图,分别为 MiterRound Bevel

 

代码

<!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.lineWidth = 25;

        // 最左边的是 miter 样式         context.beginPath();         context.moveTo(99, 150);         context.lineTo(149, 50);         context.lineTo(199, 150);         context.lineJoin = "miter";         context.stroke();

        // 中间的是 round 样式         context.beginPath();         context.moveTo(239, 150);         context.lineTo(289, 50);         context.lineTo(339, 150);         context.lineJoin = "round";

        context.stroke();

        // 最右边的是 bevel 样式         context.beginPath();         context.moveTo(379, 150);         context.lineTo(429, 50);         context.lineTo(479, 150);         context.lineJoin = "bevel";         context.stroke();       };

    </script>

  </head>

  <body>

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

  </body>

</html>

1.4.3 圆角画圆角使用方法 arcTo() 。此方法需要一个控制点、一个终止点和半径作为必要的参数。如:

<script>

  context.arcTo(controlX,controlY,endX,endY,radius); </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");         var rectWidth = 200;         var rectHeight = 100;         var rectX = 189;         var rectY = 50;         var cornerRadius = 50;

        context.beginPath();         context.moveTo(rectX, rectY);

        context.lineTo(rectX + rectWidth - cornerRadius, rectY);         context.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY

+ cornerRadius, cornerRadius);

        context.lineTo(rectX + rectWidth, rectY + rectHeight);         context.lineWidth = 5;         context.stroke();       };

    </script>

  </head>

  <body>

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

  </body>

</html>

上一篇 下一篇

评论



分享