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

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

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个参数的操作;
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值