zoukankan      html  css  js  c++  java
  • canvas图层

    (1)globalAlpha 用于设置所有绘制的透明度,默认值为0。

    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    
    context.fillStyle = 'rgba(280,187,188,1)';
    context.fillRect(10,10,100,100);
    
    context.globalAlpha = 0.5;//透明度为0.5
    
    context.fillStyle = 'rgba(180,187,188,1)';
    context.fillRect(20,20,80,80);

    (2)globalCompositionOperation 表示后绘制的图形怎样与先绘制的图形结合。

    context.fillStyle = 'rgba(280,187,188,1)';
    context.fillRect(150,150,100,100);
    
    context.globalCompositeOperation = 'source-in';//重叠部分可见,其他透明。
    
    context.fillStyle = 'rgba(180,187,188,1)';
    context.fillRect(160,160,80,80);

    注:(1)globalCompositionOperation 可能值。

    source-over(默认):后绘制图层位于前图层上方。

    source-in:图层重叠部分可见,其他透明。

    source-out:图层不重叠部分可见,先绘制层透明。

    source-atop:图层重叠部分可见,先绘制不受影响。

    destination-over:后绘制图层位于前图层下方。

    destination-in:后绘制图层位于前图层下方,不重叠部分透明。

    destination-out:后绘制图形擦除与先绘制图形重叠部分。

    destination-atop:后绘制图层位于下方,不重叠部分,先绘制层透明。

    lighter:重叠部分的值相加,使该部分变亮。

    copy:后绘制图形替代与之重叠的先绘制图形。

    xor:重叠部分执行“异或”操作。

    (2)不同浏览器对该属性的实现存在较大差异。

  • 相关阅读:
    USACO07FEB银牛派对
    求环总结
    NOIP2015信息传递(拓扑排序 / 并查集)
    APIO2012dispatching (左偏树)
    [编程题]山寨金闪闪 (面试题)
    【小米oj】简单直接全排列
    【小米oj】寻找归一数字
    【小米oj】dreamstart 的催促
    【小米oj】打羽毛球的小爱同学
    【小米oj】石头收藏家
  • 原文地址:https://www.cnblogs.com/cornlin/p/7653468.html
Copyright © 2011-2022 走看看