HTML5动画----canvas基础5（组合与裁切）

最新推荐文章于 2021-07-04 23:05:33 发布

wenmin1987

最新推荐文章于 2021-07-04 23:05:33 发布

阅读量145

点赞数

分类专栏： HTML5动画文章标签： canvas组合与裁切

本文链接：https://blog.csdn.net/wenmin1987/article/details/108045845

版权

HTML5动画专栏收录该内容

10 篇文章 0 订阅

订阅专栏

组合：context.globalCompositeOperation属性

<canvas id="myCanvas" width="300" height="200" style="border: 1px solid;"></canvas>
       <script type="text/javascript">
           var c=document.getElementById("myCanvas");
           var context=c.getContext("2d");

           context.fillStyle="red";

           context.fillRect(50,25,100,100);
           context.fillStyle="green";
//           context.globalAlpha="0.5";//透明度
           //context.globalCompositeOperation="source-over";//指定图形组合方式 A over B
           //context.globalCompositeOperation="destination-over";//B over A
           //context.globalCompositeOperation="source-atop";//原有内容和新图与原有内容重叠的部分，原有内容位于重叠之上
           //context.globalCompositeOperation="destination-atop";//原有内容和新图与原有内容重叠的部分，原有内容位于重叠之下
           //context.globalCompositeOperation="source-in";//新图只出现与原内容重叠部分，其余为透明
           //context.globalCompositeOperation="destination-in";//原内容只出现与新图重叠部分，其余为透明
           //context.globalCompositeOperation="source-out";//新图中与原有内容不重叠
           //context.globalCompositeOperation="destination-out";//原有内容中与新图不重叠的部分保留
           //context.globalCompositeOperation="lighter";//将重叠的部分加色处理
           //context.globalCompositeOperation="darker";//将重叠的部分减色处理
           //context.globalCompositeOperation="copy";//只保留新图形
           context.globalCompositeOperation="xor";//将重叠的部分变为透明
           context.beginPath();
           context.arc(150,125,50,0,Math.PI*2,true);
           context.closePath();
           context.fill();
       </script>

裁切l路径：clip() ，形成一个蒙版，没有被蒙版的区域会被隐藏

<canvas id="myCanvas" width="300" height="300" style="border: 1px solid;"></canvas>
       <script type="text/javascript">
           function draw(){
           var ctx=document.getElementById("myCanvas").getContext("2d");
           ctx.fillStyle="black";
           ctx.fillRect(0,0,300,300);
           ctx.fill();
           ctx.beginPath();
          ctx.arc(150,150,130,0,Math.PI*2,true);//绘制一个圆形并进行裁切，则圆形之外的区域将不会绘制在Canvas上
           //裁切路径
          ctx.clip();//裁切路径，原理与绘制Canvas图形类似，只不过clip的作用是形成一个蒙版，没有被蒙版的区域会被隐藏
           ctx.translate(200,20);
           for(var i=1;i<90;i++){
               ctx.save();
               ctx.transform(0.95,0,0,0.95,30,30);
               ctx.rotate(Math.PI/12);
               ctx.beginPath();
               ctx.fillStyle="red";
               ctx.globalAlpha="0.4";
               ctx.arc(0,0,50,0,Math.PI*2,true);
               ctx.closePath();
               ctx.fill();
           }

           }
           window.οnlοad=function(){
               draw();
           }
       </script>