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>
转载请注明原文地址: https://www.6miu.com/read-97018.html
