Canvas学习记录:裁剪和绘制图像

裁剪区域clip()

裁切路径和普通的 canvas 图形差不多,不同的是它的作用是遮罩,用来隐藏不需要的部分。

剪切区域,它是Canvas之中由路径所定义的一块区域,浏览器会将所有的绘图操作都限制在本区域内执行。在默认情况下,剪辑区域的大小与Canvas画布大小一致。除非你通过创建路径并调用Canvas绘图环境对象的clip()方法来显式的设定剪辑区域,否则默认的剪辑区域不会影响Canvas之中所绘制的内容。然而,一旦设置好剪辑区域,那么你在Canvas之中绘制的所有内容都将局限在该区域内。这也意味着在剪辑区域以外进行绘制是没有任何效果的

我们使用 clip() 方法来创建一个新的裁切路径。

默认情况下,canvas 有一个与它自身一样大的裁切路径(也就是没有裁切效果)

我们对照实例解释下

实例clip()

使用clip()有以下要点:

  • 必须先创建好路径。创建完整后,调用clip()方法来设置裁剪区域。
  • 裁剪是对画布进行的,裁切后的画布不能恢复到原来的大小,所以要想保证最后仍然能在canvas最初定义的大小下绘图需要注意save()restore()
  • 画布是先裁切完了再进行绘图。并不一定非要是图片,路径也可以放进去

更多实例

https://codepen.io/AlexZ33/pe...

绘制图像drawImage()

drawImage()是一个很关键的方法,它可以引入图像、画布、视频,并对其进行缩放或裁剪。

这里

api: CanvasRenderingContext2D.drawImage()


三种表现形式:

//三参数
//可用于加载图像、画布或视频
 ctx.drawImage(image, dx, dy);
//五参数
//除了可以加载图像还可以对图像进行指定宽高的缩放
 ctx.drawImage(image, dx, dy, dWidth, dHeight);
//九参数
//除了缩放,还可以裁剪
 ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
参数 描述
img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
sWidth 可选。被剪切图像的宽度。
sHeight 可选。被剪切图像的高度。
dx 在画布上放置图像的 x 坐标位置。
dy 在画布上放置图像的 y 坐标位置
dWidth 可选。要使用的图像的宽度。(伸展或缩小图像)
dHeight 可选。要使用的图像的高度。(伸展或缩小图像)

实例

现在我们用上面学的知识做一个探照灯小app

https://codepen.io/AlexZ33/pe...

参考

MDN Canvas教程
31 days of Canvas tutorials
Canvas学习:裁切clip()
canvas 核心技术图形动画和游戏开发

阅读 2.2k

推荐阅读
镜心的小树屋
用户专栏

方寸湛然GitHub组织地址:[链接]

47 人关注
123 篇文章
专栏主页