canvas二

妈蛋没个开头还不能写了more了

Using-images

drawing images

canvas提供了三种绘制图片的方法分别为

  • drawImage(image, x, y)： 引用一个image对象并从canvas的(x,y)坐标点处绘制
  • drawImage(image, x, y, width, height)： 同上并制定图片宽高为width和height
  • drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)： 引用一个image并从原图的(sx,xy)开始裁剪宽高为sWidth和sHeight的大小，并将其从canvas的(dx,dy)处绘制成宽高为dWidth，dHeight的图片

image对象可以是HEMLImageElement或者HTMLVideoElement或者另一个HTMLCanvasElement，但注意需要在image对象加载完毕后再绘制

Transformations

save and restore

  • O.save()： 每一次调用该方法，都会将canvas当前的状态，包括transformations变换，strokeStyle，fillStyle等属性，当前的clipping path等信息压入一个栈中
  • O.restore()： 每一次调用该方法，都会将上一次save()时push到栈里的信息pop出栈，即回复到上一次save时的状态，不用再手动修改一些属性

Translating

O.translate(x,y)： 将canvas的画布的原点进行裁剪，即将(0,0)点的位置移至(x,y)处。在重复绘制图片时，与save(),restore()方法结合，可以不用再改变绘制的原点坐标，示例,且裁剪之外的部分绘制不受影响。第二次translate时是相对于前一次的位置变换的而不是初始位置。

Rotating

O.rotate()： 将画布按顺时针方向旋转一定的的弧度，可以用Math.PI/180为360度角度单位代表的弧度，然后乘以对应的角度。

Scaling

O.scale(x,y)： 将canvas上每一像素默认的宽高按x,y的比例放大缩小，x,y小于1为缩小，大于1则是放大。

Transforms

  • O.transform(a, b, c, d, e, f)：

有他娘的6个参数，分别为(水平缩放，水平方向的边线顺偏移，垂直方向的边线顺偏移，垂直缩放，水平位移，垂直位移)，当b和c互为相反数时，旋转后原来形状不会变形，否则会变形的。

  • setTransform(a, b, c, d, e, f)：重置transform为新的值
  • resetTransform()： 重置transform为默认值，即不进行变换
1
2
3
4
5
6
7
特地看了下这个b和c参数：
当b为1时，水平方向上的边线左端不变，右端沿垂直方向向下(正方向)移动了相对原垂直高度1倍的距离，同理0.5则位移0,5倍的距离，-1则向上位移1倍距离
当c为1时,垂直方向上的边线上端不变，下端沿水平方向向右(正方向)移动了相对原水平长度1倍的距离，同理0.5则位移0,5倍的距离，-1则向左位移1倍距离
以上是根据API的解释，实际上的表现更易理解的是b就是垂直方向上进行偏移，c是水平方向进行偏移，当然左上的端点位置是不变的。而不应该按API解释的b是水平c是垂直

compositing-and-clipping

globalCompositeOperation

globalCompositeOperation=”” ,设置全局颜色混合时的规则，妈蛋好复杂，我只能提供地址了，传送门

clip

调用O.clip()方法，可以按上一步绘制出的图形裁剪出来一个区域，在这之后的绘制只有在clip()区域内的图像才会出现，超出范围的被遮盖，可以添加之前提到的fillRule填充规则。