购物车
登陆 / 注册
微信扫码登陆

推荐手册

定义与用法

globalCompositeOperation属性设置绘制新形状时要应用的合成操作的类型。


浏览器支持



Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 globalCompositeOperation 属性。

注意:Internet Explorer 8 及之前的版本不支持 <canvas> 元素。


JavaScript语法

ctx .globalCompositeOperation = type ;


属性值

描述
source-over默认。在目标图像上显示源图像
source-atop目标图像顶部显示源图像源图像位于目标图像之外的部分是不可见的。
source-in目标图像中显示源图像。只有目标图像之内的源图像部分会显示,目标图像是透明的。
source-out目标图像之外显示源图像。只有目标图像之外的源图像部分会显示,目标图像是透明的。
destination-over源图像上显示目标图像
destination-atop源图像顶部显示目标图像目标图像位于源图像之外的部分是不可见的。
destination-in源图像中显示目标图像。只有源图像之内的目标图像部分会被显示,源图像是透明的。
destination-out源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示,源图像是透明的。
lighter显示源图像 + 目标图像
copy显示源图像。忽略目标图像
xor使用异或操作对源图像目标图像进行组合。

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>html中文网</title>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
	var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.globalCompositeOperation = 'xor';

ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);

ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号