html5图形组合

<!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 οnlοad="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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值