【HTML5 Canvas核心技术】第二章绘制

253 阅读2分钟

isPointInPath方法

  • 该方法主要是判断参数(x,y)点是否在路径上,如果在路径上就返回true,否则false
  • 该方法主要是针对路径的,对fillRect这里是没有效果的
  • 该方法主要是针对当前路径的,如果当前路径上有多路径,只对第一个子路径有效

向canvas上绘制图形或是图像的步骤:

  • 将图像绘制放到一个无限大的透明位图上
  • 将图像的阴影绘制到另一个位图上
  • 将阴影中的每个像素的alpha分量都乘以绘图环境中设置的globalAlpha属性值,也就是给每个像素都设置了一个透明度
  • 将上面两个位图进行合图像合成,在操作的时候可以使用合成模型参数

圆角矩形的绘制

  • 没有规定具体的像素的话,可以通过lineJoin来实现圆角

rect创建的路径是闭合的,但是arc创建的路径不是闭合的,如果在调用该方法是已有其他的子路径存在,arc会用一条线段将已有的路径终点和该圆弧的起点连接在一起.rect是只能顺时针创建,而arc可以通过参数来改变创建的方向

image.png 问题是如何确保可以在像素之间呢

线段的连接点 当两条线段进行连接的时候lineJoin = miter,可以通过miterLimit属性来表示斜接线的长度与二分之一线宽的比值。如果斜切线的长度超过了该值。浏览器会以bevel方式来绘制线段的连接点

1627635301(1).png

1627635339(1).png

贝塞尔曲线 内容跳转 图像和视频

  • drawImage参数
    • drawImage(image,dx,dy)
    • 如果没有传入目标canvas的宽度就直接按照图片的原始默认大小来绘制
    • drawImage(image,dx,dy,dw,dh)
    • drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
    • 其中以字母d开头的变量是指目标canvas,以字母s开头的变量指的是源图像
    • 如果drawImage中传入的是视频对象HTMLVideoElement,那么该方法就是将当前视频帧绘制出来