HTML5画布沿弧路径文本

来源：互联网发布：js取绝对值函数编辑：程序博客网时间：2024/05/22 07:56
<!DOCTYPE HTML><html>  <head>    <style>      body {        margin: 0px;        padding: 0px;      }    </style>  </head>  <body>    <canvas id="myCanvas" width="578" height="250"></canvas>    <script>      function drawTextAlongArc(context, str, centerX, centerY, radius, angle) {        var len = str.length, s;        context.save();        context.translate(centerX, centerY);        context.rotate(-1 * angle / 2);        context.rotate(-1 * (angle / len) / 2);        for(var n = 0; n < len; n++) {          context.rotate(angle / len);          context.save();          context.translate(0, -1 * radius);          s = str[n];          context.fillText(s, 0, 0);          context.restore();        }        context.restore();      }      var canvas = document.getElementById('myCanvas'),         context = canvas.getContext('2d'),        centerX = canvas.width / 2,        centerY = canvas.height - 30,        angle = Math.PI * 0.8,        radius = 150;            context.font = '30pt Calibri';      context.textAlign = 'center';      context.fillStyle = 'blue';      context.strokeStyle = 'blue';      context.lineWidth = 4;      drawTextAlongArc(context, 'Text along arc path', centerX, centerY, radius, angle);      // draw circle underneath text      context.arc(centerX, centerY, radius - 10, 0, 2 * Math.PI, false);      context.stroke();    </script>  </body></html>
0 0