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填充规则。