3.3.6_在圆弧周围绘制文本

来源：互联网发布：北师大网络教育会计学编辑：程序博客网时间：2024/05/16 17:55
3.3.6_在圆弧周围绘制文本

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>在圆弧周围绘制文本</title>        <style>            body{                background: #eee;            }            #canvas{                background: #fff;                cursor: pointer;                margin-left: 10px;                margin-top: 10px;                box-shadow: 4px 4px 8px rgba(0,0,0,0.5);                -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);                -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);            }        </style>    </head>    <body>        <canvas id="canvas" width="1000" height="600"></canvas>    </body>    <script>        var canvas = document.getElementById('canvas');        var context = canvas.getContext('2d');         //文本样式设置        var text_fill_style = 'rgba(100,130,240,0.5)';        var text_stroke_style = 'rgba(200,0,0,0.7)';        var text_size = 64;        //圆弧设置        circle = {            x:canvas.width/2,            y:canvas.height/2,            radius:200        };        //初始化        context.textAlign = 'center';        context.textBaseline = 'middle';        //绘制圆弧形文字        drawCircularText('clockwise around the circle',Math.PI*2,Math.PI/8);        function drawCircularText(string,startAngle,endAngle){            var radius = circle.radius;            var angleDecrement = (startAngle-endAngle)/(string.length-1); //每个字符间隔的角度            var angle = parseFloat(startAngle);            var index = 0; //第个字符的标记            var character;            context.save();            context.fillStyle = text_fill_style;            context.strokeStyle = text_stroke_style;            context.font = text_size + 'px lucida sans';            while(index<string.length){                character = string.charAt(index);                context.save();                context.beginPath();                context.translate(circle.x+Math.cos(angle)*radius,circle.y - Math.sin(angle)*radius);                context.rotate(Math.PI/2-angle);                context.fillText(character,0,0);                context.strokeText(character,0,0);                angle -= angleDecrement;                index++;                context.restore();            }            context.restore();        }    </script></html>
0 0