html js 扇形统计图 |
您所在的位置:网站首页 › 绘制扇形统计图应遵循以下规则 › html js 扇形统计图 |
HTML5 Demo
您的浏览器暂不支持Canvas HTML仅仅定义显示的内容,如何画图还要借助JavaScript了,这也很简单,我们来看一下: function drawCircle(){ var canvas = document.getElementById("circle"); var ctx = canvas.getContext("2d"); ctx.fillStyle = '#77D1F6'; ctx.beginPath(); ctx.moveTo(200,150); ctx.arc(200,150,150,0,Math.PI*2,false); ctx.fill(); } drawCircle(); 我们就在html文件中使用 之后的arc方法就是画圆的了。参数的含义为:前两个是圆心坐标,上面解释过了。第三个参数是半径大小,我们定义canvas的宽度为300像素,这里用半径就是300的一半,第四个参数是圆周起始位置,这就很有说头了,也涉及到一些几何知识,我们来看一张图: 0 PI就是起始位置了,沿顺时针路线,分别是0.5 PI(正下方),1 PI和1.5 PI(正上方),这个为我们以后画饼图提供了扇形范围的依据。 第五个参数是弧长,就是我们圆弧的范围,Math.PI*2就是整个圆了,Math.PI是半圆,这没什么好说的,完全的数学知识。第六个参数是个布尔值,就是确定是顺时针还是逆时针,这里false是顺时针。基础的内容就说完了,我们来看一下效果: |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |