html5图形组合

来源：互联网发布：淘宝宝贝品牌怎么填编辑：程序博客网时间：2024/05/16 15:49

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图形的组合</title>
<script>
function draw(id){
var c=document.getElementById(id);
var cxt=c.getContext("2d");
var oprtns=new Array(
"source-atop",
"source-in",
"source-out",
"source-over",
"destination-atop",
"destination-in",
"destination-out",
"destination-over",
"lighter",
"copy",
"xor"
);
var i=10;
cxt.fillStyle="blue";
cxt.fillRect(10,10,60,60);//绘制第一种图形-矩形
cxt.globalCompositeOperation=oprtns[i];
cxt.beginPath();//绘制开始路径
cxt.fillStyle="red";
cxt.arc(60,60,30,0,Math.PI*2,true);
cxt.fill();
cxt.closePath();//绘制结束路径
}
</script>
</head>
<body onload="draw('canvas')">
<h1>图形组合globalCompositeOperation=type,type指定何种类型,取值有12种</h1>
<ul>
<li>1.source-over:新图形会覆盖在原有内容上面</li>
<li>2.destination-over:会在原有内容之下绘制新的图形</li>
<li>3.source-in:新图形会仅仅出现在与原有内容重叠的部分,其他部分都变成透明的</li>
<li>4.destination-in:原有内容中与新图形重叠的部分被保留,其他的部分变成透明的</li>
<li>5.source-out:新图形与原图形不重叠的部分被绘制出来</li>
<li>6.destination-out:原有内容中与新图形不重叠的部分被保留</li>
<li>7.source-atop：在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。</li>
<li>8.destination-atop：在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。</li>
<li>9.lighter:显示源图像 + 目标图像。</li>
<li>10.darker:两图形中重叠的部分绘制两种颜色相减的颜色</li>
<li>11.xor:重叠的部分会变透明</li>
<li>12.copy：显示源图像。忽略目标图像。</li>
</ul>
<canvas id="canvas" width="400" height="300" style="border:1px solid blue;"></canvas>
</body>

</html>

0 0