• canvas擦除多边形，利用globalCompositeOperation

     canvas擦除多边形，利用globalCompositeOperation 
    1.画出之前应有的区域（大）
    利用     ctx.globalCompositeOperation="destination-out";
    2.画出擦除后需要保留的区域，填充颜色用rgba 透明度设置为1
    ctx.globalCompositeOperation="source-over";
    3.再次画擦除后需要保留区域，颜色为需要展示的颜色
    由于globalCompositeOperation操作已经把外层（第一次展示，需要画的图形与擦除后图像交集剪切，所以展示图像颜色不受其影响

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title></title>
    6. <style>
    7.     #myCanvas{
    8.         margin-left: 500px;
    9.     }
    10. </style>
    11. </head>
    12. <body>
    13.  
    14. <canvas id="myCanvas" width="300" height="350" style="border:1px solid #d3d3d3;">
    15. 您的浏览器不支持 HTML5 canvas 标签。
    16. </canvas>
    17. <script>
    18. var c=document.getElementById("myCanvas");
    19. var ctx=c.getContext("2d");
    20. ctx.fillStyle="rgba(0, 225, 0,1)";
    21. ctx.fillRect(20,20,75,50);
    22. 	ctx.globalCompositeOperation="destination-out";
    23.     ctx.fillStyle="rgba(255,255, 255,1)";	
    24. ctx.fillRect(30,30,55,30);	
    25. ctx.globalCompositeOperation="source-over";
    26. ctx.fillStyle="rgba(255, 0, 0,0.5)";	
    27. ctx.fillRect(30,30,55,30);	
    28.  
    29. ctx.globalCompositeOperation="destination-out";
    30.     ctx.fillStyle="rgba(255,255, 255,1)";	
    31.     ctx.globalCompositeOperation="source-over";
    32. // ctx.fillStyle="rgba(0, 225, 0,0.5)";	
    33. // ctx.fillRect(130,130,55,30);	
    34. // ctx.globalCompositeOperation="destination-in";
    35. // ctx.fillStyle="rgba(255, 0, 0,1)";
    36. // ctx.fillRect(120,120,75,50);
    37. </script>
    38.  
    39. </body>
    40. </html>

    例子方便用矩形复现三次画法加上  globalCompositeOperation 

  • 相关阅读:
    ClickHouse在大数据领域应用实践
    @Autowire、@Recourse用啥？
    数据结构与算法-砖墙问题
    【高阶数据结构】哈希（哈希表、哈希桶）
    Java并发(十七)----变量的线程安全分析
    postgresql源码编译安装
    云原生【1】：docker 常用知识总结
    基于时序行为的协同过滤推荐算法（Python）
    PHP代码审计16—ThinkPHP代码审计入门
    Vue.2x秘籍（下）
  • 原文地址：https://blog.csdn.net/qq_51389137/article/details/126528412