<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="cvs" width="200" height="200"></canvas>
<script>
//扇形对象
CanvasRenderingContext2D.prototype.sector = function (x, y, radius, sDeg, eDeg) {
// 初始保存
this.save()
// 位移到目标点
this.translate(x, y)
this.beginPath()
// 画出圆弧
this.arc(0,0,radius,sDeg, eDeg)
// 再次保存以备旋转
this.save()
// 旋转至起始角度
this.rotate(eDeg)
// 移动到终点，准备连接终点与圆心
this.moveTo(radius,0)
// 连接到圆心
this.lineTo(0,0)
// 还原
this.restore()
// 旋转至起点角度
this.rotate(sDeg)
// 从圆心连接到起点
this.lineTo(radius,0)
this.closePath()
// 还原到最初保存的状态
this.restore()
return this
}
//执行
function start(degrees){
var ctx = document.getElementById('cvs').getContext('2d')
degrees++
ctx.sector(100,100,50,0,Math.PI/180*degrees).fill()
if(degrees<360){
setTimeout('start('+degrees+')',10)
}else{
alert('画完了')
}
}
start(1)
</script>
</body>
</html>
我的思路是这样的：用圆角属性做出扇形，再用一个矩形去遮挡
宽高相等画出正方形
加border-radius属性做出1/4圆或者1/2圆
矩形旋转
例如transform: rotate(45deg) 顺时针旋转45度
以上都在一个position:relative的父元素中，要旋转的矩形position:absolute
用js控制矩形旋转的角度，应该就可以了
1、使用Ext.container.Container--创建容器2、使用Ext.panel.Panel--创建面板
3、使用Ext.toolbar.ToolBar--创建工具条
4、使用Ext.tab.Panel--创建Tab面板
5、使用Ext.container.Viewport--整体布局
6、使用Ext.window.Window--创建窗口
7、使用Ext.window.MessageBox--创建对话框
8、使用Ext.menu.CheckItem、Ext.menu.ColorPicker、Ext.menu.DatePicker实现特殊菜单项
9、使用Ext.Ation--创建按钮
10、使用Ext.ProgressBar--创建进度条
11、使用Ext.slider.Single--创建滑动条
12、使用Ext.Img--创建图片
13、使用Ext.Editor--创建编辑器
14、使用Ext.tip.ToolTip--创建提示
15、使用Ext.QuickTipManager和Ext.tip.QuickTip--创建提示
16、使用Ext.ux.GMapPanel实现Google地图
17、使用Ext.form.field.ComboBox--创建复合框
18、使用Ext.data.Store与Ext.data.Model管理数据
19、使用Ext.data.Proxy.Proxy和Ext.data.reader.Reader读取数据
20、使用Ext.grid.Panel--生成表格
21、使用Ext.grid.column.Column-定义列
22、使用Ext.grid.Panel显示远程数据
23、使用Ext.tree.Panel生成数
xtype Class 描述
button Ext.Button 按钮
splitbutton Ext.SplitButton 带下拉菜单的按钮
cycle Ext.CycleButton 带下拉选项菜单的按钮
buttongroup Ext.ButtonGroup 编组按钮(Since 3.0)
slider Ext.Slider 滑动条
progressExt.ProgressBar 进度条
statusbar Ext.StatusBar 状态条，2.2加进来，3.0 又去了
colorpaletteExt.ColorPalette调色板
datepicker Ext.DatePicker 日期选择面板
xtype Class 描述
window Ext.Window 窗口
viewportExt.ViewPort视口，即浏览器的视口，能随之伸缩
box Ext.BoxComponent盒子组件，相当于一个 <div>
component Ext.Component 组件
container Ext.Container 容器
panel Ext.Panel 面板
tabpanelExt.TabPanel选项面板
treepanel Ext.tree.TreePanel 树型面板
flash Ext.FlashComponent 显示 Flash 的组件(Since 3.0)
gridExt.grid.GridPanel 表格
editorgrid Ext.grid.EditorGridPanel可编辑的表格
propertygridExt.grid.PropertyGrid 属性表格
editor Ext.Editor 编辑器
dataviewExt.DataView数据显示视图
listviewExt.ListView列表视图
xtype Class 描述
paging Ext.PagingToolbar 分页工具条
toolbar Ext.Toolbar 工具栏
tbbuttonExt.Toolbar.Button 工具栏按钮
tbfill Ext.Toolbar.Fill工具栏填充区
tbitem Ext.Toolbar.Item工具条项目
tbseparator Ext.Toolbar.Separator 工具栏分隔符
tbspacerExt.Toolbar.Spacer 工具栏空白
tbsplit Ext.Toolbar.SplitButton 工具栏分隔按钮
tbtext Ext.Toolbar.TextItem工具栏文本项
xtype Class 描述
menuExt.menu.Menu 菜单
colormenu Ext.menu.ColorMenu 颜色选择菜单
datemenuExt.menu.DateMenu 日期选择菜单
menubaseitemBaseItem
menucheckitem Ext.menu.CheckItem 选项菜单项
menuitemExt.menu.Item
menuseparator Ext.menu.Separator 菜单分隔线
menutextitemExt.menu.TextItem 文本菜单项
xtype Class 描述
formExt.FormPanel/Ext.form.FormPanel表单面板
checkboxExt.form.Checkbox 多选框
combo Ext.form.ComboBox 下拉框
datefield Ext.form.DateField 日期选择项
timefield Ext.form.TimeField 时间录入项
field Ext.form.Field 表单字段
fieldsetExt.form.FieldSet 表单字段组
hidden Ext.form.Hidden 表单隐藏域
htmleditor Ext.form.HtmlEditor HTML 编辑器
label Ext.form.Label 标签
numberfield Ext.form.NumberField数字编辑器
radio Ext.form.Radio 单选按钮
textareaExt.form.TextArea 多行文本框
textfield Ext.form.TextField 表单文本框
trigger Ext.form.TriggerField 触发录入项
checkboxgroup Ext.form.CheckboxGroup 编组的多选框(Since 2.2)
displayfieldExt.form.DisplayField 仅显示，不校验/不被提交的文本框
radiogroup Ext.form.RadioGroup 编组的单选按钮(Since 2.2)
xtype Class 描述
chart Ext.chart.Chart 图表组件
barchartExt.chart.BarChart 柱状图
cartsianchart Ext.chart.CartesianChart
columnchart Ext.chart.ColumnChart
linechart Ext.chart.LineChart 连线图
piechartExt.chart.PieChart 扇形图
xtype Class 描述
arraystore Ext.data.ArrayStore
directstore Ext.data.DirectStore
groupingstore Ext.data.GroupingStore
jsonstore Ext.data.JsonStore
simplestore Ext.data.SimpleStore
store Ext.data.Store
xmlstoreExt.data.XmlStore
