HTML5画布圆角教程

来源：互联网发布：淘宝甩手工具箱编辑：程序博客网时间：2024/05/12 07:28

创建圆角使用HTML5画布,我们可以使用arcTo()方法被定义为控制点,一个终点和一个半径。

<!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');      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>  </body></html>

0 0