canvas( 2 )

圆弧context.arc(x, y, radius, start,end, boolean)
x:圆心的x坐标
y:圆心的y坐标
radius:半径
start:开始角度
end:结束角度
boolean:是否逆时针（true）为逆时针，(false)为顺时针
写个小例子 圆形加载效果
function d2a(n){ return n*Math.PI/180; }//由于arc方法使用的是弧度制 所以封装一个小方法 把角度转换为弧度 window.onload= function () { var oC=document.querySelector('#c1'); var context=oC.getContext('2d'); var x=200; var y=200; var r=100; var d=0; var timer=null; timer=setInterval(function () { context.lineWidth=200; context.clearRect(0,0,oC.width,oC.height); context.beginPath(); context.strokeStyle='red'; context.arc(x,y,r,d2a(0),d2a(d++),false); context.stroke(); if(d>360){ clearInterval(timer); } },16) }

效果如下：从0度到360的渐变 过程中和完成后的两种形态

Paste_Image.png

Paste_Image.png

绘制文字以及其中的一些方法
填充文字：context.fillText(text,x,y)绘制文字轮廓 context.strokeText(text,x,y)
text:要绘制的文字
x:文字起点的x坐标轴
y:文字起点的y坐标轴
context.font:设置字体样式
context.textAlign:水平对齐方式
start、end、right、center

context.textBaseline:垂直对齐方式
top、hanging、middle、alphabetic、ideographic、bottom

context.measureText(text).width:计算字体长度(px) 注意 没有计算高度height方法
依然要写个小例子 代码如下：
var oC = document.querySelector('#c1');var context = oC.getContext('2d');context.fillStyle = 'red';context.textAlign = 'center'; //水平方向居中context.textBaseline = 'middle'; //垂直方向居中context.font = '50px 微软雅黑'; //字体大小为50px 字体为微软雅黑var text='你好，我是于晓鱼'; //想要呈现的内容context.fillText(text,oC.width/2,oC.height/2); //填充文字 注意text内容要写在第一个位置alert(context.measureText(text).width);//计算字体的长度为400px

translate、scale、rotate方法
1、平移context.translate(x,y)
x:坐标原点向x轴方向平移xy:坐标原点向y轴方向平移y

2、缩放context.scale(x,y)
x:x坐标轴按x比例缩放y:y坐标轴按y比例缩放

3、旋转context.rotate(angle)
angle:坐标轴旋转x角度（角度变化模型和画圆的模型一样）

小例子~
var oC = document.querySelector('#c1'); var context = oC.getContext('2d'); context.save(); //保存了当前context的状态 context.beginPath(); context.rotate(d2a(10)); context.strokeRect(100,100,200,100); context.restore();//恢复到刚刚保存的状态,保存恢复只能使用一次 context.save(); context.beginPath(); context.scale(0.5, 0.5);//缩放 context.rotate(d2a(10));//旋转 context.translate(300, 100);//平移 context.strokeRect(400,100,200,100); context.restore(); //实验表明应该移动的是坐标轴 //实验表明缩放的是坐标轴比例 //实验表明旋转的是坐标轴 //注意平移 缩放 旋转 这些参数都是两个 缺一不可

保存和恢复状态
保存：context.save() 调用该方法，会保存当前context的状态、属性恢复：context.restore() 调用该方法就能恢复到save时候context的状态、属性
canvas中特定元素的旋转平移等操作实际上是对整个画布进行了操作，所以如果不对canvas进行save以及restore，那么每一次绘图都会在上一次的基础上进行操作，最后导致错位。错误效果：

Paste_Image.png

正确效果：

Paste_Image.png