canvas day3

绘制图片

(需要配合加载完毕事件使用img.onload)

1.ctx.drawImage(img,x坐标,y坐标) 三参数

2.ctx.drawImage(img,x坐标,y坐标,宽,高) 五参数

3.ctx.drawImage(img,裁剪的x坐标,裁剪的y坐标,裁剪宽,裁剪高,绘制的x坐标,绘制的y坐标,图形的宽,图形的高) 九参数

帧动画

绘制新的图画时,要先清除画布

状态保存

ctx.save();把当前的状态(绘制环境的所有属性)copy一份进行保存.

状态回滚

ctx.restore();回滚到离当前最近的保存的状态(保存一次,只能回滚一次,回滚完保存的属性失效)

注意:状态保存与回滚和路径无关（即不能save路径）

变换

平移坐标轴

ctx.translate(x坐标,y坐标);

以绘制的图形不会受到影响,平移会累加

旋转坐标轴

ctx.rotate(旋转的弧度)

缩放坐标轴

ctx.scale(x轴缩放的比值,y轴缩放的比值)

绘制选装图形的步骤

1.先平移坐标轴到图形的中心

2.旋转坐标轴

3.绘制图形(注意:坐标轴体系变化了)