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
;
}
