使用SVG绘制圆形、扇形、文字实现转盘抽奖效果

最新推荐文章于 2025-05-28 13:04:52 发布

朱维娜

最新推荐文章于 2025-05-28 13:04:52 发布

阅读量7.2k

点赞数

CC 4.0 BY-SA版权

文章标签： svg 前端 canvas

本文链接：https://blog.youkuaiyun.com/zhu_06/article/details/81812504

本文介绍了如何使用SVG绘制圆形和扇形，并结合文字创建转盘抽奖效果。首先引入SVG，然后绘制最外层的圆，接着绘制扇形和添加文字。对于不熟悉SVG路径方法（path）的读者，推荐查阅MDN的SVG教程以获取更多详细信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图如下：

思路：

1.先引入SVG

<!--html-->
<!--因为转盘中的文字及奖品个数都是动态的，所以在js中生成svg字符串，利用vue的v-html渲染到页面-->
<svg width="100%" height="100%" version="1.1"  xmlns="http://www.w3.org/2000/svg" v-html="svgStr">

2.画出最外层的圆

//js
//因为圆心在（150，150），且半径为150，所以整个画布为300*300
this.svgStr=“<circle cx="150" cy="150" r="150" stroke-width="2" fill="#C13820"/>”

3.画出扇形及文字

let color = index % 2 == 0 ? 'white' : '#FEF6E1';//扇形的颜色，白黄（#FEF6E1）相间
//path绘制扇形，foreignObject绘制文字,也可以用text绘制文字，但是text的话，无法自动换行
//（150，150）是扇形的圆心，扇形半径为130，所以才会有一个红色的圆圈，rotateDeg是根据奖项的数量算出来的扇形圆心角度数
//（x1,y1）,（x2,y2）是根据扇形的圆心坐标，rotateDeg和扇形半径算出来扇形的另外两个点坐标，利用正弦余弦函数
//再配合transform的