html5新增的canvas标签允许脚本语言动态渲染位图像,在基于Web的图像显示方面比Flash更加立体，也更加精巧.现在我们先来用canvas标签实现一个简单的饼状图.
最终效果图:
cake.jpg
-
基础
canvas标签本身不具有绘图功能,我们必须借助js在网页上绘制图像,所以我们在html中添加一个canvas标签,并加上一个id值,以便我们能够获取这个标签做下一步操作:
html:
<canvas id="canvas" width="900" height="600" style="border: 1px solid #000;">你
的浏览器不支持canvas,请升级浏览器.(浏览器不支持，显示此行文本)</canvas>
.................................................................................
<script>
//1.获取canvas标签
var canvas = document.getElementById('canvas');
//2.获取上下文(当前是2d)
var ctx = canvas.getContext('2d');
</script>
几个注意点:
①canvas是一张画布,本身没有内容.我们需要用js代码在上面''画画'';
②画布的大小必须是如上的行内设置width和height属性,不能使用css设置画布的大小(css设置会使画布拉升,使得我们得不到对应像素的图片,画出的图片也会变形);
③js获取canvas标签之后,需要先初始化一个执行环境canvas.getContext('2d')是画2d图片,canvas.getContext('webgl')为3d图片,所有的线条图片都是基于这个'ctx'环境来画的;
④canvas只兼容ie9及以上版本浏览器,所以要在标签中设置版本不兼容提示语句.
-
画弧(圆)准备工作
ctx.beginPath():开始一段新路径(告诉浏览器要开始画画了);
ctx.moveTo():绘制的初始位置;
ctx.lineWidth:绘制线条宽度;
ctx.strokeStyle:绘制线条颜色(color值);
ctx.fillStyle:图块填充颜色(color值);
ctx.fill():执行图块填充(需放在所有属性设置的后面);
ctx.stroke():执行绘制(需放在所有属性设置的后面);
Math.PI: 数学中的π弧度(换算公式deg*Math.PI/180);
ctx.font:绘制文字设置字号,字体;
ctx.fillText(text, textX, textY):文字内容与位置设置;
ctx.arc(x0,y0,r,beginAngel,endAngel,counterclockwise):弧的一些属性设置;
x0:圆心的x值(相对于画布); y0:圆心的y值(相对于画布);
r:圆的半径;
beginAngel:开始角度; endAngel:结束角度;
counterclockwise:true(逆时针)/ false(顺时针,默认属性);
- 案例分析
此饼状图分为5份,每份都有自己的属性(所属城市,颜色,所占比例),所以我们首先应该定义一个数据包(数组),根据数据包中城市所占的比例值,我们计算出每个城市圆的角度,通过角度来渲染对应的颜色;整体思路就是这样.
- 实现代码
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
//1.创建数据包(信息)
var infoArr = [
{name:'北京', color:'yellow', value:0.3},
{name:'上海', color:'red', value:0.2},
{name:'广州', color:'green', value:0.1},
{name:'深圳', color:'purple', value:0.15},
{name:'天津', color:'blue', value:0.25}
];
//2.定义圆心
var x0 = canvas.width * 0.5, y0 = canvas.height * 0.5;//显示在画布中间
//2.1定义半径
var radius = 150;
//2.2定义起始角度
var beginAngle = -90 *Math.PI/180;(定义初始角度为-90deg)
//3.遍历,绘制扇形
for (var i = 0; i < dataArr.length; i++) {
//3.1扇形角度
var tempAngle = dataArr[i].value * 360 *Math.PI/180;
//3.2结束角度
var endAngle = beginAngle + tempAngle;
//3.3开启路径
ctx.beginPath();
//3.4起点
ctx.moveTo(x0, y0);
//3.5绘制弧度
ctx.arc(x0, y0, radius, beginAngle, endAngle);
//3.6设置颜色
ctx.fillStyle = dataArr[i].color;
//3.7填充
ctx.fill();
//4.绘制文字
//4.1常量
var textAngle = beginAngle + tempAngle * 0.5; //角度
var text = dataArr[i].name + dataArr[i].value * 100 + '%';
console.log(text);
//4.2文字坐标
var textX = x0 + (radius + 30) * Math.cos(textAngle);
var textY = y0 + (radius + 30) * Math.sin(textAngle);
//4.3文字字号和字体
ctx.font = "20px '微软雅黑'";
//4.4判断文字是否在左边
if((textAngle > 90 *Math.PI/180) && (textAngle < 270 *Math.PI/180) ) {
ctx.textAlign = 'end';//文字的右侧在基线的左端
}
//4.5 绘制文字
ctx.fillText(text, textX, textY);
//5.更新起始角度, 将当前扇形的结束角度作为下一个扇形的起始角度
beginAngle = endAngle;
}
代码每一步骤都有对应分析,最重要的是整个过程的思路分析,有不明白的欢迎简信我,有不足之处也欢迎指正,O(∩_∩)O谢谢大家!
