HTML5,CSS3,JS绘制饼图

有同学问我相关的东西，随便写个例子发上来，这里所实现的是2D的饼图。

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Pie Chart</title><style>div{padding: 10px;/* Internet Explorer 10 */display: -ms-flexbox;-ms-flex-pack: center;-ms-flex-align: center;/* Firefox */display: -moz-box;-moz-box-pack: center;-moz-box-align: center;/* Safari, Opera, and Chrome */display: -webkit-box;-webkit-box-pack: center;-webkit-box-align: center;/* W3C */display: box;box-pack: center;box-align: center;}</style></head><body><div><label>Input data(Seprate by ','):</label><br><textarea id="data"></textarea><br><label>Input color(Seprate by ','):</label><br><textarea id="color"></textarea><br><button id="Draw">Draw</button></div><div><canvas id="PieChart" width="300" height="300" ></canvas></div><script type="text/javascript">            //画圆的函数
            document.getElementById('Draw').onclick = function(){//设置数据数组和颜色数组（颜色数组要足够大，要么就再画的时候进行取余运算，防止溢出，数据数组要满足和为100，否则圆不全）var data = document.getElementById('data').value.split(',');var color = document.getElementById('color').value.split(',');//得到画布var canvas = document.getElementById("PieChart");//这里是2D的画笔var ctx = canvas.getContext("2d");//起始弧度（0是从水平线开始，1.5 * Math.PI是从圆的最上方开始）var startPoint = 0;//循环填充for(var i = 0 ;i < data.length; i++){//填充色
                    ctx.fillStyle = color[i % color.length];//边框颜色(可以同上，但是就看不到边框了)
                    ctx.strokeStyle = 'white';//开始画图
                    ctx.beginPath();//回到圆心
                    ctx.moveTo(150, 150);//画扇形（参数【圆心X，Y，半径，起始弧度，终点弧度（把终点的值赋给起点），ture是逆时针false是顺时针】）
                    ctx.arc(150, 150, 150, startPoint, startPoint -= Math.PI * 2 * (data[i] / 100), true);//颜色填充
                    ctx.fill();ctx.stroke();}}</script></body>
</html>

转载于:https://www.cnblogs.com/ich1990/p/3680268.html

HTML5,CSS3,JS绘制饼图相关推荐

利用HTML5+CSS3+JS实现简单的钟表
HTML5+CSS3+JS实现动态时钟利用HTML5+CSS3+JS实现简单的钟表,仅供参考学习效果图: 在线效果预览思路: 1. 先定义一个类名为timepiece的圆表表盘 HTML: &l ...
❤生日快乐网站模板HTML❤（精品制作）（HTML5+CSS3+JS）
生日快乐网站模板HTML(精品制作)(HTML5+CSS3+JS) 最近姐姐的生日快到了,想着也没有什么礼物送给她,恰好因为CTF的原因学了点HTML和JavaScript,就做了两个网页,当然因为网 ...
Web端点餐系统（HTML5 + CSS3 + JS(jQuery)）
Web点餐系统(前端开发) 一.系统简介二.系统设计三.系统实现 · 首页(当天菜品)/推荐菜品/热买菜品 · 已选菜品 · 我的订单 · 订单统计四.总结五.源码下载一.系统简介该Web ...
2023年最全前端面试题考点HTML5+CSS3+JS
合集:2023年最全前端面试题考点HTML5+CSS3+JS+Vue3+React18+八股文+手写+项目+笔试_参宿7的博客-CSDN博客本章内容为一面基础面为了简洁,相关文章参考链接在标题里 ...
HTML5,CSS3,js
HTML5,CSS3,js html5 html基本结构块级标签和行级标签 html5表格 html5表单 css3 css使用方法 css常用属性 css3的过渡和变换 css3的动画属性和多列属 ...
HTML生日快乐代码 (粉色主题)（HTML5+CSS3+JS）520表白代码/七夕情人节网页/告白/求婚/生日快乐
html+css+js 生日快乐网站模板(多页面功能版本+音乐)❤520/表白/七夕情人节/求婚❤专用炫酷动画网页的源代码(HTML5+CSS3+JS) 程序员爱情❤520/表白/七夕情人节/求婚❤专 ...
HTML生日快乐代码 (粉色主题)（HTML5+CSS3+JS）520表白代码/七夕情人节网页/告白/求婚/生日快乐...
html+css+js 生日快乐网站模板(多页面功能版本+音乐)❤520/表白/七夕情人节/求婚❤专用炫酷动画网页的源代码(HTML5+CSS3+JS) 程序员爱情❤520/表白/七夕情人节/求婚❤专 ...
七夕静态页面html,html5+CSS3+JS实现七夕言情功能代码
因为今天8月28日就是中国的情人节-七夕,作为程序猿一枚的我就只有在家敲代码咯!但我还是有一颗脱单的心:制作了h5+css+js界面祝小伙伴们:七夕快乐具体的功能有: 1.下雪的背景动画 2.下面的 ...
HTML5 + css3 + js 网页设计作业网页小游戏
用HTML5 + css3 + js 做的一个翻图片的网页小游戏,挺有意思的吧! 因为上网页课要交一个个人的网页设计作业,时间挺紧的,记得以前玩游戏偶尔看到一个翻转图片的小游戏,就想模仿着做一个! 目 ...

HTML5,CSS3,JS绘制饼图

HTML5,CSS3,JS绘制饼图相关推荐

最新文章

热门文章