HTML5画布线加入教程

来源：互联网发布：vs2010 c语言编辑：程序博客网时间：2024/05/21 15:47

设置行加入风格的一个HTML5画布路径,我们可以设置lineJoin上下文属性。路径可以有一个三线连接:斜方,圆,或斜。除非另有规定,HTML5画布行加入属性与斜方违约的风格。

注意:如果你的线是相当薄,不连接在miter的角度,它可能很难区分不同的线连接。

<!DOCTYPE HTML><html>  <head>    <style>      body {        margin: 0px;        padding: 0px;      }    </style>  </head>  <body>    <canvas id="myCanvas" width="578" height="200"></canvas>    <script>      var canvas = document.getElementById('myCanvas');      var context = canvas.getContext('2d');      // set line width for all lines      context.lineWidth = 25;      // miter line join (left)      context.beginPath();      context.moveTo(99, 150);      context.lineTo(149, 50);      context.lineTo(199, 150);      context.lineJoin = 'miter';      context.stroke();      // round line join (middle)      context.beginPath();      context.moveTo(239, 150);      context.lineTo(289, 50);      context.lineTo(339, 150);      context.lineJoin = 'round';      context.stroke();      // bevel line join (right)      context.beginPath();      context.moveTo(379, 150);      context.lineTo(429, 50);      context.lineTo(479, 150);      context.lineJoin = 'bevel';      context.stroke();    </script>  </body></html>

0 0