0
点赞
收藏
分享

微信扫一扫

html5 canvas 原生 javascript 实现 饼状图 环形图

Jonescy 2022-08-02 阅读 107


图片

html5 canvas 原生 javascript 实现 饼状图 环形图_2d

 

重点:

   //变成圈图,中间加点东西
            ctx.beginPath();
            ctx.arc(100, 100, 30, 0,Math.PI * 2, false);
            ctx.closePath();
            ctx.fillStyle = "#000";
            ctx.fill();

中间加个东西做出效果

代码:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test1</title>
</head>
<style>
body {
background: #000;
margin: 0px;
padding: 0px;
}

#main {
position: absolute;
width: 200px;
height: 200px;
}
</style>

<body>
<div id="main"></div>

</body>

<script>
var por = {
init: function () {
var main = document.getElementById("main");
//渲染上来一个canvas 多个canvas 的时候注意 id 防止重复
main.innerHTML = '<canvas id="canvasmain" width="' + main.offsetWidth + '" height="' + main.offsetHeight + '"></canvas>';
var vmain = document.getElementById("canvasmain");
var c = document.getElementById("canvasmain");
var ctx = c.getContext("2d");

//底图可要可不要
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.arc(100, 100, 30, 0,Math.PI * 1.5, false);
ctx.closePath();
ctx.fillStyle = "#fff";
ctx.fill();

//逆时针 扇形图
// ctx.beginPath();
// ctx.moveTo(100, 100);
// ctx.arc(100, 100, 30, Math.PI * 1.5, Math.PI * 1.5 - Math.PI * 2 * 60 / 100, true);
// ctx.closePath();
// ctx.fillStyle = "#bbb";
// ctx.fill();

//顺时针一号内容
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.arc(100, 100, 50, Math.PI * 1.5, Math.PI * 1.5 - Math.PI * 2 * 60 / 100, true);
ctx.closePath();
ctx.fillStyle = "#ddd";
ctx.fill();

//顺时针2号内容
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.arc(100, 100, 50, Math.PI * 1.5 - Math.PI * 2 * 60 / 100, Math.PI * 1.5 - Math.PI * 2 * 70 / 100, true);
ctx.closePath();
ctx.fillStyle = "#090765";
ctx.fill();

//顺时针3号内容
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.arc(100, 100, 50, Math.PI * 1.5 - Math.PI * 2 * 70 / 100, Math.PI * 1.5 - Math.PI * 2 * 100 / 100, true);
ctx.closePath();
ctx.fillStyle = "#098765";
ctx.fill();

//变成圈图,中间加点东西
ctx.beginPath();
ctx.arc(100, 100, 30, 0,Math.PI * 2, false);
ctx.closePath();
ctx.fillStyle = "#000";
ctx.fill();

}
};
por.init();


</script>

</html>

 

举报

相关推荐

0 条评论