canvas 高级功能(中)
canvas 高级功能(中)
在本文中,你将学习到 Canvas 提供的一些更高级的功能。本文将讲述如何合成、创建阴影使图形看起来更真实有趣。本文内容非常精彩,我希望这些内容能够拓宽你的眼界,帮助你学会画布的高级功能。
1. 合成
canvas 高级功能(中)确实包括许多内容,祝贺你学完了这些知识。在这一节中,我们将学习一些较为轻松的内容——合成,它们不复杂,而且还很有趣。简而言之,组合就是将多个可视化元素组合成为一个可视化元素。在画布中绘制的所有东西都是已经合成的,这意味着绘制的所有内容都会与已经绘制的现有元素合并在一起。这实际上都是基本合成,只是将一些内容叠加到另一些内容之上。我马上要介绍这些方面的合成,但是现在我们先了解一下画布中最简单的合成方法,即globalAlpha
属性。
❝注意:本节将介绍的两个全局合成属性都会影响到2D渲染上下文的绘图效果。一定要明确一点,那就是修改全局合成属性会影响到修改之后所绘制的全部内容。 ❞
1.1 全局阿尔法值
在画布上进行绘图之前,它会应用一个与globalAlpha
属性相匹配的阿尔法值。赋给globalAlpha
的值必须在0.0
(全透明)与1.0
(不透明)之间,默认值是1.0
。简单地说,globalAlpha
属性会影响将要绘制的对象的透明度。例如,可以按照以下方式绘制一个半透明的正方形:
context.fillStyle = "rgb(63, 169, 245)";
context.fillRect(50, 50, 100, 100);
context.globalAlpha = 0.5;
context.fillStyle = "rgb(255, 123, 172)";
context.fillRect(100, 100, 100, 100);
由于我们是在绘制了蓝色正方形后才设置globalAlpha
属性的,所以只有粉红色正方形才会受到阿尔法值的影响。结果是后面蓝色正方形的一小块稍稍透过前面的粉红色正方形显示出来。
现在,通过给fillStyle
设置一个包含小于1的阿尔法值的rgba
值,也可以得到相同的效果。不同之处是,globalAlpha
设置的是全局阿尔法值,这个值会在后续应用rgba
颜色值等阿尔法值时被参照。例如,如果globalAlpha
为0.5
,你又应用了一次fillstyle
(它带有一个阿尔法值为0.5
的rgba
),那么结果的阿尔法值实际上就是0.25
。2D渲染上下文的全局阿尔法值(0.5)充当了计算其他阿尔法值的基数(0.5*0.5=0.25)。
1.2 合成操作
正如本节开头介绍的,即使全新的2D谊染上下文也会在一开始就使用合成。你可能没有注意到这一点,因为此时使用的合成方法能得到你预期的结果:一个图形叠加到另一图形之上。这种合成称为源覆盖于目标之上,源是绘制的新图形,而目标则是可能已经绘制了图形的2D渲染上下文。我们知道,这是因为2D渲染上下文的globalCompositeOperation
属性的默认值是source-over
,并且这个属性定义了对 2D 渲染上下文上所有绘制图形执行的合成类型(11种可选方法之一)。必须指出的是,根据赋值顺序的不同globalCompositeOperation
的所有值可能会涉及源或目标的其中一个(取决于顺序),而不会同时涉及两者。例如,source-over
是(源覆盖于目标之上)的简称,目标是隐含的,因为它不需要在值中指定(源必须绘制在某些东西之上)。
让我们先了解一下globalCompositeOperation
支持的11种选择。使用下面的代码作为模板,你可以学习每一种合成操作。其中蓝色正方形是目标,而粉红色正方形是源。我们只使用蓝色和粉红色而不使用其他颜色的原因是它们能够更好地显示合成操作的效果:
context.fillStyle = "rgb(63, 169, 245)";
context.fillRect(50, 50, 100, 100);
context.globalCompositeoperation = "source-over";
context.fillStyle = "rgb(255,123,172)";
context.fillRect(100, 100, 100, 100);
❝注意:有一些浏览器不支持全部的
globalCompositeOperation
值。 ❞
source-over
这是默认值,它表示绘制的图形(源)将画在现有画布(目标)之上:
context.globalCompositeOperation = "source-over";
效果与目前学习到的绘图效果是完全相同的。
destination-over
这个操作的值与前一个值相反,所以现在目标绘制在源之上:
context.globalCompositeOperation = "destination-over";
效果与前一个操作恰好相反。
source-atop
这个操作会将源绘制在目标之上,但是在重叠区域上两者都是不透明的。绘制在其他位置的目标是不透明的,但源是透明的。
destination-atop
这个操作与source-atop
相反,目标绘制在源之上,其中在重叠区域上两者都是不透明的,但绘制在其他位置的源是不透明的,而目标变成透明的。
source-in
在源与目标重叠的区域只绘制源。而不重叠的部分都变成透明的。
destination-in
这个操作与source-in
相反,在源与目标重叠的区域保留目标。而不重叠的部分都变成透明的。
source-out
在与目标不重叠的区域上绘制源。其他部分都变成透明的。
destination-out
在与源不重叠的区域上保留目标。其他部分都变成透明的。
lighter
这个值与顺序无关,如果源与目标重叠,就将两者的颜色值相加。得到的颜色值的最大取值为255,结果就是白色。
copy
这个值与顺序无关,只绘制源,覆盖掉目标。
xor
(异或)
这个值与顺序无关,只绘制出不重叠的源与目标区域。所有重叠的部分都变成透明的。
总之,这些合成操作使你能够在需要绘制一些复杂图形的情况下实现一些有趣的效果。有一些操作(如 destination-out
)在擦除画布上一些非矩形区域时是很有用的:例如,使用圆作为源。
2. 阴影
所有人都喜欢好看的阴影效果,它们可能是Adobe Photoshop中使用最广泛的效果了,并且也经常在Web和图形设计中使用。如果操作正确,它们实际上确实能够增加图像真实感。然而,如果操作不当,它们也可能完全毁掉一个图像。
在画布中创建阴影效果是相对较简单的,它可以通过4个全局属性进行控制。这些属性是shadowBlur
、shadowOffsetX
、shadowOffsetY
和shadowColor
。我们马上开始逐一讲解这些属性。默认情况下,2D渲染上下文是不会绘制阴影效果的,因为shadowBlur
、shadowOffsetX
和shadowOffsetY
都设置为0
,而shadowColor
则设置为透明黑色。创建阴影效果的唯一方法是将shadowColor
修改为不透明值,同时将shadowBlur
、shadowOffsetX
或shadowOffsetY
都设置为非 0
值:
context.shadowBlur = 20;
context.shadowColor = "rgb(0 ,0, 0)";
context.fillRect(50, 50, 100, 100);
在这个例子中,给阴影设置了20
像素的模糊值,并将它的颜色设置为完全不透明的黑色。阴影的偏移值在 x
轴和 y
轴方向仍然保持为默认值0。需要特别指出的是,即使使用了不透明的黑色,但由于采用了模糊效果,这个阴影在边界上仍然有些透明效果。
修改shadowBlur
、shadowOffsetX
或shadowOffsetY
属性,就能够创建不同的阴影效果:
context.shadowBlur = 0;
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = "rgba(100, 100, 100, 0.5)"; // 透明灰色
context.fillRect(200, 50, 100, 100);
将模糊修改为0,创建清晰的阴影效果,而稍微向右下偏移,就得到一个不同的阴影效果。使用上节中提到过的rgba
颜色值将shadowColor
设置为透明浅灰色,就能够实现更炫的效果。
画布的阴影支持所有图形,所以完全可以在所绘制的圆形或其他图形上创建阴影效果。甚至可以将颜色修改为任意奇特的值:
context.shadowColor = "rgb(255,0,0)"; // 红色
context.shadowBlur = 50;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.beginPath();
context.arc(400, 100, 50, 0, Math.PI * 2, false);
context.closePath();
context.fill();
这段代码会得到一个圆形,它后面有一个鲜红色阴影效果。
通过组合使用各种模糊和颜色值,我们就能够实现一些与阴影完全无关的效果。例如,使用模糊黄色阴影在一个对象周围创建出光照效果,如太阳或发光体。
相关文章
- 微信分享功能_微信分享链接点开是图片
- 开源文档型知识库管理系统,强大的全文检索与文档分类管理功能,你值得拥有
- Kube-OVN 高级功能 | OpenStack 集成
- AirServer2023最新版软件的功能优势介绍
- 23. Groovy 面向对象编程-Traits特性学习-第四篇 高级功能
- 新功能上线,助力小程序营销推广
- Kube-OVN高级功能 | 支持 BGP
- 威胁行为者利用企业滥用微软Office 365某功能,对企业发起勒索攻击
- Spring Cloud Config 高级功能(二)
- 【紧急漏洞】typecho评论功能的网址填空出现储存型xss漏洞
- Redis订阅模式的高级功能-同步订阅
- 泼辣修图高级版 强大修图功能
- Apple 的 plist 编辑器入门指南:基础操作与高级功能详解
- 返回顶部功能jquery实现代码详解编程语言
- js高级截取字符串功能详解编程语言
- 精益审计:Oracle实现高级审计功能(oracle审计功能)
- 使用Oracle函数实现强大功能(oracle如何使用函数)
- 微软恢复Windows 11 Win+X高级菜单的按键快捷访问功能
- 微软恢复Win11 Win+X高级菜单的按键快捷访问功能
- MySQL 5.6.24:新的功能引入(mysql5.6.24)
- 新版Redis更强大的并发控制功能(新版redis并发控制)
- Oracle数据库的高级功能提升效率(oracle中的高级特性)
- MySQL并非完全免费,需要考虑使用许可和商业支持MYSQL也提供了高级版和服务,拥有比免费版更多的功能和灵活的技术支持
- 红色卓越高效利用Redis中高级触发功能(redis高级触发功能)
- Redis的高级功能提升业务效率(redis高级应用特性)
- Redis开启高级功能,提升精彩程度(redis 高级功能)
- Redis实现高级功能超时管理(redis高级功能超时)
- Oracle查询中文功能失效问题探究(oracle中文查询失效)
- Oracle 30625实现強大的数据库管理功能(oracle30625)
- PHP5.3新特性命名空间规则解析及高级功能
- java断点续传功能实例(java获取远程文件)