HTML Canvas - 阴影和变换

Canvas API 还包含一些高级图形样式功能，可用于改善渲染到 Canvas 元素上的图形的外观。可以通过使用可用方法和属性将阴影和变换应用于画布上下文对象。

接口CanvasRenderringContext2D包含几乎所有用于使用阴影和变换在 Canvas 元素内创建吸引人图形的方法和属性。

属性

以下是 HTML5 中可用的与阴影和变换相关的各种属性。

序号	属性及描述
1	shadowBlur Canvas API 的此属性将模糊阴影应用于在画布元素内绘制的 Context 对象。
2	shadowColor shadowColor 属性指定要应用于在 Canvas 元素内绘制的 Context 对象阴影的颜色。
3	shadowOffsetX 我们可以使用 shadowOffsetX 属性设置要为上下文对象绘制的水平阴影距离。
4	shadowOffsetY 我们可以使用 shadowOffsetY 属性设置要为上下文对象绘制的垂直阴影距离。

方法

在 Canvas 元素内部使用阴影和变换创建图形可用的方法在下面的表格中给出。

序号	方法及描述
1	getTransform() CanvasRenderringContext2D 接口的此方法检索应用于当前画布元素上下文的变换。
2	resetTransform() 此方法通过将当前图形转换为 Canvas 元素内的原始形状或路径，将当前变换重置为单位矩阵。
3	restore() 调用此方法时，它会恢复最近保存的画布状态。
4	rotate() Canvas API 的此方法向上下文对象的变换矩阵添加旋转。
5	save() 调用此方法时，它会通过将其推入堆栈来保存最近的画布状态。
6	scale() 调用此方法时，它会水平/垂直缩放当前上下文对象。
7	setTransform() Canvas 2D API 的此方法为给定的形状调用变换矩阵，并帮助我们执行诸如旋转、平移和缩放之类的移动操作。
8	transform() 此方法更改变换矩阵，使我们能够缩放、旋转和倾斜上下文对象。
9	translate() Canvas API 的此方法将平移变换添加到当前矩阵。

打印页面

广告