好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

HTML5 Canvas 合成

在html5画布上绘制形状时,可以设置如何将绘制的 内容 与画布上已绘制的 内容 进行合成。本文介绍如何将绘画 内容 与画布上已有的 内容 混合在一起.

画布合成

2D上下文具有两个 属性 ,这些 属性 控制画布的合成模式。这些是:

globalAlpha
globalCompositeOperation

globalAlpha

该globalAlpha 属性 确定绘制 内容 的透明度/不透明度。它可以取0到1之 间的 值。0表示您绘制的 内容 是完全透明的。值为0.5表示绘制的 内容 是半透明的。值为1表示您绘制的 内容 是完全不透明的。预设值为1。
该globalAlpha 属性 设置如下:

context.globalAlpha?=?0.5;

globalCompositeOperation

该globalCompositeOperation 属性 确定您绘制的 内容 如何混合到画布上的现有图形中。
该globalCompositeOperation 属性 设置如下:

context.globalCompositeOperation?=?" cop y";

globalCompositeOperation引用“源”和“目的地”,并指定如何混合源和目的地。源是您绘制的 内容 ,目的地是已经绘制的 内容 。以下是可能值及其含义的列表:



值 描述 cop y 源和目标重叠的地方, 显示 源。 destination-atop 源和目标重叠,并且两者都不透明时,将 显示 目标。如果目标是透明的,则 显示 源。 destination-in 在源和目标重叠且两者都不透明的地方,将 显示 目标。没有重叠的地方不会 显示 源。 destination-out 在源和目标不重叠的任何地方 显示 目标。在其他任何地方都 显示 透明性。 destination-over 源和目标重叠的地方 显示 目标。如果没有重叠,则 显示 源。 source-atop 源和目标重叠的地方, 显示 源。没有重叠的地方,或者源是透明的,将 显示 目标。 source-in 当源和目标重叠且两者都不透明时,将 显示 源。其他任何地方都会 显示 透明性。 source-out 源和目标不重叠的地方,将 显示 源。在其他任何地方都 显示 透明性。 source-over 当源不透明时,将 显示 源。目的地 显示 在其他任何地方。 lighter 源颜色和目标颜色相互叠加,从而使颜色更亮,朝着1的颜色值(该颜色的最大亮度)移动。 xor



HTML5 Canvas 状态 ? ?HTML5 Canvas 绘制图像

查看更多关于HTML5 Canvas 合成的详细内容...

  阅读:43次

上一篇

下一篇

第1节:HTML5 教程    第2节:HTML5 浏览器支持    第3节:HTML5 新元素    第4节:HTML5 Video 视频    第5节:HTML 5 Video + DOM    第6节:HTML5 内联 SVG    第7节:HTML5 新的 Input 类型    第8节:HTML5 MathML 数学公式    第9节:HTML5 Geolocation 地理定位    第10节:HTML5 Canvas画布    第11节:HTML5 拖放 ( drag 和 drop )    第12节:HTML5 Audio 音频    第13节:HTML5 Web Workers    第14节:HTML5 表单元素    第15节:HTML5 表单属性    第16节:HTML5 语义元素    第17节:HTML5 Web 存储    第18节:HTML5 Web SQL 数据库    第19节:HTML5 应用程序缓存    第20节:HTML 5 服务器发送事件    第21节:HTML5 WebSocket    第22节:HTML5 历史记录API    第23节:HTML 5 代码规范    第24节:HTML5 Canvas 描边和填充    第25节:HTML5 Canvas 绘制矩形    第26节:HTML5 Canvas 清除画布    第27节:HTML5 Canvas 渐变    第28节:HTML5 Canvas 合成    第29节:HTML5 Canvas 绘制图像    第30节:HTML5 Canvas 绘制文本    第31节:HTML5 Canvas 阴影    第32节:HTML5 Canvas 路径    第33节:HTML5 Canvas 转换    第34节:HTML5 Canvas 状态    第35节:HTML5 Canvas toDataURL()    第36节:HTML5 Canvas 像素处理    第37节:HTML5 Canvas 制作动画