大前端路上的点点滴滴

canvas作为html5的重要标签有以下几个注意点:

(一)canvas使用行内样式定义宽,高,height="600" weight='''600'不然显示会有问题

(二)兼容性:在不认识canvas的标签内写上提示<canvas>您的浏览器不支持</canvas>

(三)使用

1.获取canvas上下文(操作画图的工具全部在此对象上)

	var ctx=document.getElementById('canvas').getContext('2d');

2,划线

   

	var data=[{valua:0.1,color:'red',text:'fdsf'},{valua:0.3,color:'green',text:'fdsf'},{valua:0.4,color:'blue',text:'fdsf'},{valua:0.2,color:'yellow',text:'fdsf'}];
	var temp=-90;
	for(var i=0;i<data.length;i++){
    		ctx.beginPath();
    		ctx.moveTo(300,300);
    		var du=data[i].valua*360;
    		ctx.arc(300,300,100,temp*Math.PI/180,(temp+du)*Math.PI/180);
    		ctx.fillStyle=data[i].color;
    		ctx.fill();
    		temp+=du;
	}