HTML Canvas - 颜色和样式

我们还可以使用 Canvas 的 API 方法和属性为 Canvas 上绘制的图形设置样式，从而生成和使用具有吸引力的视觉内容。Canvas 提供了各种选项来设置在 Canvas 元素上呈现的图形的样式。

接口CanvasRenderringContext2D包含了大多数在 Canvas 元素上创建吸引人图形的方法和属性。当需要时，上下文对象还会使用包含图形样式方法和属性的其他接口。

以下是可用于将不同的颜色和样式应用于 HTML5 元素的属性列表。

序号	属性及描述
1	filter 此属性提供滤镜效果，例如灰度、不透明度和模糊。它接受 CSS filter 样式接受的所有值。
2	globalAlpha 此属性指定要应用于上下文对象的当前图形的不透明度。
3	globalCompositeOperation 此属性将合成操作应用于 Canvas 元素对象。

序号

属性及描述

此属性提供滤镜效果，例如灰度、不透明度和模糊。它接受 CSS filter 样式接受的所有值。

此属性指定要应用于上下文对象的当前图形的不透明度。

此属性将合成操作应用于 Canvas 元素对象。

下表列出了可在 Canvas 元素内部创建图形以及对其着色和设置样式的方法。

序号	方法及描述
1	addcolorStop() 此方法在 Canvas 元素内的 Canvas 渐变中添加一个新的颜色停止点。
2	createConicGradient() Canvas API 的createConicGradient()方法在给定坐标的点周围创建一个渐变。
3	createLinearGradient() Canvas API 的createLinearGradient()方法沿连接给定坐标的线创建渐变。
4	createPattern() 此方法通过在给定区域中重复输入图像来创建图案。
5	createRadialGradient() Canvas API 的createRadialGradient()方法使用两个圆的大小和给定坐标创建径向渐变。

打印页面