图片操作
绘制图片
绘制图片方法的三种调用方式
- drawImage(image,dx,dy)
- drawImage(image,dx,dy,dw,dh)
- drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
drawImage(image,dx,dy)
-
必须在图片加载完成之后才能开始绘制
-
参数含义：image：页面中的图片，该图片可以是页面中的img元素，也可以是js创建的image dx：图片左上角的横坐标
dy：图片左上角的纵坐标
drawImage(image,dx,dy,dw,dh)
-
参数含义： dw：定义图片的宽度
dh：定义图片的高度
-
增加的两个参数，一般用于图片的缩小和放大
drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
- 参数含义： 参数sx、sy、sw、sh表示源图片需要被截取的部分 sx：表示源图片被截取部分的横坐标 sy：表示源图片被截取部分的纵坐标 sw：表示源图片被截取部分的宽度 sh：表示源图片被截取部分的高度
图片的平铺
- 方法：createPattern(image,type)，type参数值：repeat、repeat-x、repeat-y、no-repeat
- image表示被平铺的对象，可以是图片，也可以是canvas对象
- 需要配合fillStyle方法使用
var pattern = ctx.createPattern(image,'repeat')
ctx.fillStyle = pattern
ctx.fillRect(0,0,cnv.wdith,cnv.height)
图片的切割
- 实现切割图片的步骤：绘制基本图形，用于切割---->使用clip()方法--→绘制图片
- clip()方法比较复杂，后面会专门进行介绍
深入图片操作：图片结合文字
变形操作
简介
canvs中的变形操作，不仅可以用于图形，还可以用于图像和文字
平移：translate(x,y)
- 参数含义：x表示图形在x轴方向上移动的距离，可以为负；y同理
- 注意：canvas使用的是W3C坐标系，y轴正方向向下
- tanslate方法后面必须使用fillRect或者strokeRect方法进行绘制，即“动作”，对于Canvas来说，状态都必须在动作之前定义
- 默认情况下，canvas会把所有绘制的图形都保留下来
- 清空canvas：clearRect(0,0,cnv.width,cnv.height)，该方法可以用来清除部分canvas，但是这样做意义不大，值可以为负，但是不常用
缩放：scale(x,y)
- 参数含义：x表示图形在x轴方向上缩放倍数，y同理
- x,y取值在(0,1)时，图形被缩小，取值大于1时，图形被放大
- scale()方法的副作用：会修改图形的左上角坐标、宽度或高度、线条宽度
旋转：rotate(angle)
- angle取值范围：-Math.PI2~Math.PI2，当angle<0，图形逆时针旋转，反之则顺时针旋转
- 在实际开发中，推荐angle写法为：度数*Math.PI/180，可以一目了然旋转的度数
- 默认情况下，rotate()方法的旋转中心是原点
- 改变旋转中心：先使用translate方法，移动旋转中心，然后再进行旋转
变换矩阵：transform(a,b,c,d,e,f)、setTransform()
区别：使用基本一致，但是每次调用transform方法，参考的都是上一次变换后的图形状态，但是setTransform方法，会重置图形的状态，然后再进行变换
深入变形操作
变形操作除了可以用于图形以外，还可以用于文字和图片
