您的位置：首页 > Web前端 > HTML5

html5图形组合

2016-05-08 21:51 441 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航