h5之canvas专题

绘制矩形
画一个填充矩形:fillRect(x,y,width,height)
画一个矩形的边框:strokeRect(x,y,width,height)
清楚矩形区域的内容:clearRect(x,y,width,height)


绘制弧形
arc(x,y,radius,startAngle,endAngle,anticlockwise)
x,y:圆心
radius:半径
startAngle:起始点可以用PI表示
endAngle:终止点，可以用PI表示
anticlockwise:输入true代表逆时针,反之顺时针


路径绘制函数
开始路径绘制:beginPath();
移动画笔到某一坐标(一般用来设定画笔开始坐标):muveTo(x,y)
从当前坐标画一条直线到(x,y)坐标:lineTo(x,y)
画出图形边框:stroke()
填充路径范围(此方法包含closePath()):fill()
结束路径绘制:closePath()


控制图形的变形
位移:translate(x,y)
旋转:ratate(x*Math.PI)
缩放:scale(x,y)
画布状态保存与恢复:save/restore


动画应用
1.函数setinterval()
文字转化为图形函数:stroketext()
由于strokeText函数是canvas下的一个方法因此要在HTML部分申明〈canvas〉才可以使用
使用setinterval处理动画，是早期浏览器所支持的做法，该函数只会遵照我们设定的时间间隔执行程序，不会考虑最佳的播放帧数，且浏览器缩小时仍在运行，过度绘制动画造成对硬件资源的浪费，但是在ie10之后的浏览器，支持一种新的的话播放函数requestAnmationFrame()，优化了动画播放流畅度已经优化对系统资源的消耗，是专门为动画应运而生的API
实际上l两函数的使用方法有点相同，只是后者会自动调整动画播放的时间，因此不需要再设置播放的时间间隔