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 核心技术图形动画和游戏开发