canvas——绘制文本——饼图的修改

最新推荐文章于 2023-10-19 16:59:06 发布

ca11meback

最新推荐文章于 2023-10-19 16:59:06 发布

阅读量290

点赞数

文章标签： servlet 前端 html

本文链接：https://blog.csdn.net/weixin_53596260/article/details/125966656

版权

ctx.font="30px suiyi"

ctx.textAlign="center"

ctx.textBaseline="bottom"

ctx.font需要的注意的是设置字体的大小时候，后面一定跟字体库，即便是使用默认样式，也需要跟一个参数，如果不跟参数的话，前面设置字体大小的参数也无法生效

ctx.textAlign表示的文本参数的位置

ctx.textBaseline表示文本下划线的位置

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    #box {
        border: 1px black solid;
    }
</style>
 
<body>
    <canvas id="box" height="700" width="700"> </canvas>
    <script>
        /** @type {HTMLCanvasElement} */
        var canvas = document.querySelector("#box")
        var ctx = canvas.getContext("2d")
        var deg = Math.PI / 180
        var arr = [{
				name: "小面",
				money: 10
			}, {
				name: "火锅",
				money: 200
			}, {
				name: "串串",
				money: 100
			}, {
				name: "冒菜",
				money: 80
			},{
				name: "涮羊肉",
				money: 300
			},{
				name: "牛杂煲",
				money: 168
			}]
			total=0;
			for(var i=0;i<arr.length;i++){
				total=total+arr[i].money
			}
            console.log(total)
            var start=60
            arr.forEach(el => {
                ctx.beginPath()
                var r=parseInt(Math.random()*255)
			    var g=parseInt(Math.random()*255)
			    var b=parseInt(Math.random()*255)
                ctx.fillStyle=`rgb(${r},${g},${b})`
                var bili=(el.money/total)*360
                ctx.font="20px suiyi"
                ctx.arc(300,300,200,start*deg,(start+bili)*deg)
                ctx.fillText(`${el.name}`,300+250*Math.cos((start+bili/2)*deg),300+250*Math.sin((start+bili/2)*deg))
				ctx.lineTo(300,300)
				start=start+bili
				ctx.fill()
				ctx.stroke()
 
            });
    </script>
</body>
 
</html>

与前面的饼图唯一的改变就是添加了文本，文本的位置在每个扇形的中间，怎么获取扇形中间的位置呢？用的是比例的角度/2加上起始的角度*大于半径的长度，因为要文本显示在饼图之外。