2018-06-25 canvas/transform

2018-06-26

一. Canvas

1. Canvas 坐标：左上角坐标为 (0,0)

2. 路径 path

   • moveTo(x,y): 定义线条开始坐标
   • lineTo(x,y): 定义线条结束坐标
   • 然后使用 stroke(): 方法来绘制线条
   • ctx.beginPath()
   • ctx.closePath(): 方法创建从当前点到开始点的路径

3. 圆形 arc(x,y,r,start,stop,counterclockwise)，counterclockwise:false = 顺时针（默认），true = 逆时针

4. stroke()， fill()：fill()会在路径开始点和结束点之间添加一个直线，相当于自动先调了closePath()

5. 文本

   • font - 定义字体
   • fillText(text,x,y) - 在 canvas 上绘制实心的文本
   • strokeText(text,x,y) - 在 canvas 上绘制空心的文本

6. 渐变

   • createLinearGradient(x,y,x1,y1) - 创建线条渐变
   • createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
   • addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

7. 图像 drawImage(image,x,y)

8. 橡皮擦 context.clearRect(x,y,width,height) 清空给定矩形内的指定像素。

9. ctx.save() ctx.restore(),保存或者恢复 canvas 里的状态 (填充，描边，渐变，坐标位移,裁切)

10. 像素处理

• getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据,这个像素是由rgba组成，所以像素操作就是改变rgba的值
• putImageData() 方法将图像数据（从指定的 ImageData 对象）放回画布上

11. ctx.clip()裁剪,设置好裁剪路径 之后绘制的图形 只能显示裁剪路径里面的

12. canvas.toDataURL()： 得到 dataURL

13. globalAlpha globalCompositeOperation

14. isPointInPath(x,y) 如果给定的点的坐标位于路径之内的话（包括路径的边）,否则返回 false。

15. isPointInStroke(x,y) 用于检测某点是否在路径的描边线上的方法,当这个点在路径的描边线上，则返回true，否则返回false。

16. arcTo(x1, y1, x2, y2, r),参数中x1, y1, x2, y2指的是弧的两个控制点,创建介于两个切线之间的弧/曲线。

    ctx.moveTo(x0,y0); 
    ctx.arcTo(x1,y1,x2,y2,20); 
    
    x0,y0是起点坐标，x1,y1是第一个点坐标，x2,y2就是第二个点坐标。
    arcTo其实是通过起点，第1点，第2点的两条直线，组成了一个夹角，而这两条线，也是参数圆的切线。 
    复制代码

    ​

17. quadraticCurveTo(cp1x, cp1y, x, y)函数，绘制一条二次贝塞尔曲线，二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。

    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.quadraticCurveTo(20,100,200,20);
    ctx.stroke();
    复制代码

18. bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y),三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点

    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.bezierCurveTo(20,100,200,100,200,20);
    ctx.stroke();
    复制代码

    ​

19. 被污染的 Canvas(tainted canvas)：存储一张外部域中的图片，尽管不通过 CORS 就可以在画布中使用图片，但是这会污染画布。一旦画布被污染，你就无法读取其数据。例如，你不能再使用画布的 toBlob(), toDataURL() 或 getImageData() 方法，调用它们会抛出安全错误。

    img.crossOrigin = "Anonymous";
    复制代码

二. CSS3 3D Transform

2D

1. 旋转rotate： xx deg

2. 移动translate： xx px

3. 缩放scale： 无单位

4. 倾斜skew（只有2d有）： xx deg；

   • skewX()：x不动，y正方向着 x正方向扭曲，逆时针变化
   • skewY()：y不动，x正方向着 y正方向扭曲，顺时针变化

5. 矩阵matrix： matrix(a,b,c,d,e,f),原始值是 matrix(1,0,0,1,0,0);

x'=ax+cy+e   变换后的水平坐标，
y'=bx+dy+f   变换后的垂直位置
复制代码

• translate，与 e，f参数有关，e对应x轴的平移，f对应y轴的平移

  transform: matrix(1, 0, 0, 1, 30, 30) === transform: translate(30px, 30px)
  
  x' = ax+cy+e = 1*0+0*0+30 =30;
  y' = bx+dy+f = 0*0+1*0+30 =30;
  复制代码

• scale， matrix(s, 0, 0, s, 0, 0)，与a，d有关，a缩放x轴，d缩放y轴

  matrix(sx, 0, 0, sy, 0, 0) === scale(sx, sy)
  
  x' = ax+cy+e = s*x+0*y+0 = s*x;
  y' = bx+dy+f = 0*x+s*y+0 = s*y;
  复制代码

  ​

• rotate CS-SC,与a, b, c, d两个参数相关

  matrix(cosβ,sinβ,-sinβ,cosβ,0,0) === rotate(β deg)
  
  x' = x*cosθ-y*sinθ+0 = x*cosθ-y*sinθ
  y' = x*sinθ+y*cosθ+0 = x*sinθ+y*cosθ
  复制代码

​

• skew 与b, c两个参数相关

  matrix(1,tan(βy),tan(βx),1,0,0) === skew(βx deg，βy deg)
  
  x' = x+y*tan(θx)+0 = x+y*tan(θx) 
  y' = x*tan(θy)+y+0 = x*tan(θy)+y
  复制代码

6. 改变元素基点transform-origin： 百分值,em,px，字符参数值left,center,righttop,center,bottom

7. Q:父元素transform属性对子元素影响, 其中子元素也有transform属性

   A:子元素会和父元素做同样的变换，且叠加自己的属性

8. Q: 解释一下先旋转后平移以及先平移后旋转两种变换的效果差异

   A: rotate旋转的不是图像，而是坐标系。transform有多个值时，按顺序执行变换。所以顺序不同效果也不同

3D

1. 透视距离perspective，透视属性应用在变形元素的父级或祖先级，原点perspective-origin也输入值在其上

   Q: perspective属性值对子元素透视效果的影响

   A: perspective取值为none|不设置|无穷大|0,没有真3D空间。取值越小，3D效果就越明显，也就是你的眼 睛越靠近真3D。

2. 3d位移

   • translate3d(x,y,z) x和y可以是长度值，也可以是百分比；z只能设置长度值
   • traslateZ(z) 相当于translate3d(0,0,z)

3. 3d缩放

   • scale3d(x,y,z) 默认值为scale3d(1,1,1)，当参数为负值时，先翻转再缩放
   • scaleZ(z) 相当于scale3d(1,1,z)

​ transform: scaleZ(5) translateZ(-100px)和transform: translateZ(-500px)是等价的

4. 3d旋转

   • rotate3d(x,y,z,Ndeg)
   • rotateX（Ndeg） 从x轴正方向看，N > 0,顺时针转
   • rotateY（Ndeg） 从y轴正方向看，N > 0,顺时针转
   • rotateZ（Ndeg） 从z轴正方向看（即屏幕正前方看），N > 0,顺时针转

5. perspective() 透视函数perspective()是transform变形函数的一个属性值，应用于变形元素本身，只能是长度值，长度值只能是正数，且写在其他变形函数前面，否则将没有透视效果

6. 变形原点 transform-origin，默认是元素的中心点

7. 背景可见 backface-visibility：visible:可见，默认hidden:不可见

8. 变形风格 transform-style: flat（默认值，表示2d平面） | preserve-3d

9. matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)

   Q: transform属性中各个变换的执行顺序是什么？

   A: 按先后顺序执行，变换的本质是矩阵的变换，而变换矩阵的乘法是不符合乘法交换律的，所以顺序对变换结果有影响。

• translate3d(x,y,z) === matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,x,y,z,1)

• scale3d(x,y,z) === matrix3d(x,0,0,0,0,y,0,0,0,0,z,0,0,0,0,1)

转载于:https://juejin.im/post/5b30bfa451882574d50056c8