带你快速玩转canvas（8）非常用API的说明集

小鱼儿 2022-07-13 03:00 237阅读 0赞

### **10. API简单说明** ###

解释：

1. 写这个的目的只是熟悉API的功能，因此不会去像上面那样写DEMO和一一验证；
    2. 只写API和API的功能，具体请参照MDN；
    3. 或许存在兼容性问题，用的时候请注意；
    4. 不保证完全正确，有些只是根据经验推测；

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D“>MDN关于canvas的API

**ctx.canvas**

1. 通过ctx来获取canvas的html元素；
    2. 如果不存在则返回null；
    3. 是变量而不是函数

**ctx.direction = “ltr” || “rtl” || “inherit”;**

1. 兼容性极差；
    2. ltr文本从左往右；
    3. trl文本从右往左；
    4. 默认无效，需通过某个方法来开启；

**ctx.filter**

1. 兼容性极差；
    2. 提供类似css3的filter功能；
    3. 类似模糊、灰度等。

**ctx.globalAlpha**

1. 绘制图形／图片的透明度；
    2. 对图形有用（比如fillRect绘制的），对图片应该也有用；
    3. 兼容性很好

**ctx.globalCompositeOperation = type**

1. 设置图像重叠后的效果；
    2. type是字符串，值有很多种；
    3. ‘source-over’：默认值，旧的覆盖新的；
    4. ‘source-in’：只有新的和旧的重叠时才绘制，并且都是透明的（旧的图透明的部分且新的图不存在，可能会被移除）；
    5. ‘source-out’：新的只绘制在旧的不存在的地方，旧图形将被相对移除（注意，旧的透明的地方会对应让新的也透明，透明度的总和是不透明）；
    6. ‘source-atop’：新图形只在和旧图形重合的地方绘制（旧的图形会被保留，透明度应该是采用旧的图形的透明度）；
    7. ‘destination-over’：将新图形绘制在旧图形之下（默认是之上）；
    8. ’destination-in‘：现有画布内容保持在新形状和现有画布内容重叠的位置。 一切都是透明的。
    9. ’destination-out‘：相当于从画布中扣出新的图形所占的区域的旧图形；
    10. 其他略，查看MDN吧

type说明更多请参照：[https://developer.mozilla.org/en-US/docs/Web/API/Canvas\_API/Tutorial/Compositing][https_developer.mozilla.org_en-US_docs_Web_API_Canvas_API_Tutorial_Compositing]

**ctx.imageSmoothingEnabled**

1. 设置图片是否平滑；
    2. 默认为true（平滑）；
    3. 根据说明，对像素游戏缩放画布时有用，在缩放时需要改为false避免模糊；
    4. 兼容性一般；

**ctx.lineCap**

1. 线条末端以什么形状结束；
    2. ’butt‘：方形；
    3. ’round‘：圆形（半圆）；
    4. ’square‘：方形，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域（相当于多了一截）；

**ctx.setLineDash(segments)**

1. 绘制虚线；
    2. 参数是一个数组，数组元素的类型是number类型；
    3. 如果是偶数，则依次表示实线、虚线的长度；
    4. 如果是奇数，则将数组元素复制一份放在原数组后面，然后依次表示实线，虚线的长度；

**ctx.lineDashOffset**

1. 和上面搭配使用，用于设置虚线和初始位置的偏移量；
    2. 值为number类型，正值则原线条往左移动（往后退，逆时针），负值则往右移动（往前进，顺时针）；

**ctx.lineJoin**

1. 两条线如何相连，类型是字符串；
    2. ’round‘：圆角；
    3. ’bevel‘：矩形拐角，不是直接的折线，而是类似六边形那样的角；
    4. ’miter‘：直角；

**ctx.shadowColor**

1. 阴影颜色；
    2. 不设置则默认为透明（无阴影）；

**ctx.shadowBlur**

1. 描述模糊度；
    2. 推测是模糊的左右偏移的总宽度；
    3. 值的类型是number，默认是1（几乎无模糊，但似乎还是有）；
    4. 值为0时则会导致线条不存在；

**ctx.shadowOffsetX**  
**ctx.shadowOffsetY**

1. 阴影在x, y轴的偏移距离；
    2. 值类型是number

**ctx.textBaseline = “top” || “hanging” || “middle” || “alphabetic” || “ideographic” || “bottom”;**

1. 文字垂直方向的对齐方式；
    2. 这个描述的是字相对基线的位置；
    3. top：文本基线在文本块的顶部。
    4. hanging：文本基线是悬挂基线。
    5. middle：文本基线在文本块的中间。
    6. alphabetic：文本基线是标准的字母基线。
    7. ideographic：文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。
    8. bottom：文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。
    9. 默认值是 alphabetic。

**ctx.addHitRegion(options);**

1. 兼容性差，需要额外设置浏览器偏好；
    2. 用于设置画布点击的情况。

**ctx.quadraticCurveTo(cpx, cpy, x, y)**

1. 绘制二次贝塞尔曲线的方法；
    2. 起始点是当前路径最后一个点，(cpx, cpy)是控制点，(x, y)是终点；

**ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)**

1. 绘制三次贝赛尔曲线路径的方法；
    2. 第一（cp1）、第二（cp2）个点是控制点，第三个点（x，y）是结束点。起始点是当前路径的最后一个点；

**ctx.clearHitRegions()**

1. 兼容性差；
    2. 在画布中删除所有点击区域的方法；

**ctx.clip()**  
**ctx.clip(fillRule)**  
**ctx.clip(path, fillRule)**

1. 简单来说，这个是用于画出一个区域（规则或不规则），然后后面新画的所有东西都只能在这个区域内生效；
    2. 可以理解为新建一个图层，这个图层是之前画的路径所创建的，然后新画的东西就被画在这个图层上生效，然后这个新图层和原有图层合并。
    3. 有了这个之后，就可以从原图里画图而不必担心新画的图超出预期范围了。
    4. 更多请参照链接：http://jo2.org/html5-canvas-clip/

**ctx.createImageData(width, height)**  
**ctx.createImageData(imagedata)**

1. 创建一个新的、空白的、指定大小的ImageData对象；
    2. 带宽高的是指定宽高；
    3. 不带宽高的，是和指定imagedata对象宽高相同（但是不会复制图像，纯宽高）；
    4. 上面还有putImageData()方法和getImageData()方法；
    5. 不过

**ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)**

1. 兼容性差
    2. 绘制椭圆路径

**ctx.getLineDash()**

1. 获取ctx.setLineDash(segments)设置的参数；
    2. 如果没设置过，则是空数组；
    3. 如果设置的是数组元素是奇数个，返回的是补全后的偶数个元素的数组。

**ctx.isPointInPath(x, y)**  
**ctx.isPointInPath(x, y, fillRule)**  
**ctx.isPointInPath(path, x, y)**  
**ctx.isPointInPath(path, x, y, fillRule)**

1. 按照说明，是检测一个点是否在路径之内；
    2. 但是如何描述这个路径我表示不太明白；

**ctx.rect(x, y, width, height)**

1. 绘制路径；
    2. 然后可以通过fill()来填充或者stroke()来描边；
    3. fillRect()和strokeRect()是一步完成的，而这个需要两步（路径->填充）；

**ctx.rotate(angle)**

1. 让画图时的参考坐标系旋转；
    2. 也就是说，原来画个矩形，是正常x、y轴；通过这个方法旋转后，那么矩形就变倾斜了（因为参考系xy轴被旋转了）；
    3. 旋转的原点是坐标轴的原点（x:0, y:0)；
    4. 参数是弧度，正数是顺时针旋转，负数是逆时针旋转；

**ctx.scale(x, y)**

1. 缩放功能，也可以达到上下/左右反转；
    2. (1, 1)是默认情况；
    2. x指水平方向（以x=0的y轴为参考对象）缩放，如果(-1,1)则表示水平反转（以y轴为镜像的对称轴）
    3. y指垂直方向的缩放比例，如果(1,-1)那么将垂直反转（以x轴为镜像的对称轴）

**ctx.setTransform(a, b, c, d, e, f)**

1. 个人理解就是对坐标轴的变化操作；
    2. a：水平缩放，x轴，默认1（参照之前的缩放）；
    3. b：水平倾斜，x轴，默认0（有点类似rotate，但那个影响的是全部，这个只影响一个轴，下同），1的话，相当于坐标的y的值*2（往下偏移原坐标100%的距离）；
    4. c：垂直倾斜，y轴，默认0（注意，不是缩放），1的话，相当于x值*2（往右偏移100%）；
    5. d：垂直倾斜，y轴，默认1；
    6. e：水平偏移（不是百分比移动，是和canvas的width，height一样，移动一个单位）；
    7. f：垂直移动（同上）；
    8. 参数都是数字；
    9. 这个方法【会覆盖】当前的变换矩阵，多次调用只引用最新的那个；

**ctx.transform(a, b, c, d, e, f)**

1. 类似上面那个方法；
    2. 但这个区别是，这个方法【不会覆盖】当前的变换矩阵，都调用则会覆盖；
    3. 叠加的计算方式，是对应参数相加（而非相乘）；

**ctx.translate(x, y)**

1. 移动坐标轴；
    2. 相当于setTransform第5，6个参数的操作；

[https_developer.mozilla.org_en-US_docs_Web_API_Canvas_API_Tutorial_Compositing]: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing