您的位置：首页 > 其它

3.3.6_在圆弧周围绘制文本

2017-05-08 10:53 204 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航