快捷导航

栏目导航

canvas globalCompositeOperation 属性

2018-2-28 13:10| 发布者: admin| 查看: 689| 评论: 0|来自: 钱柜手机网页版

此属性设置或返回如何将一个源(新的)图像绘制到目标(已有的)的图像上。

源图像 = 您打算放置到画布上的绘图。

目标图像 = 您已经放置在画布上的绘图。

语法结构:

[JavaScript] 纯文本查看 复制代码
context.globalCompositeOperation="source-in";

浏览器兼容:

(1).IE9+浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).谷歌浏览器支持此属性。

(4).火狐浏览器支持此属性。

(5).Opera浏览器支持此属性。

(6).Safari浏览器支持此属性。

参数值:

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

globalCompositeOperation属性值效果如下:

a:3:{s:3:\"pic\";s:43:\"portal/201703/30/131206rtoto4l3jteuyntj.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="" />  
<title>钱柜手机网页版</title>
<style>
canvas{
  border:1px solid #d3d3d3;
  width:300px;
  height:150px;
}
</style> 
<script>
window.onload=function(){
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  ctx.fillStyle="red";
  ctx.fillRect(20,20,75,50);
  ctx.fillStyle="blue";        
  ctx.globalCompositeOperation="source-over";
  ctx.fillRect(50,50,75,50);        
  ctx.fillStyle="red";
  ctx.fillRect(150,20,75,50);
  ctx.fillStyle="blue";        
  ctx.globalCompositeOperation="destination-over";
  ctx.fillRect(180,50,75,50);
}
</script>
</head>
<body>
<canvas id="myCanvas">当前浏览器canvas标签</canvas>
</body>
</html>

鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-4-21 01:36 , Processed in 0.253284 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 钱柜手机网页版

返回顶部