canvas 繪製半透明圖片

  var maskCanvas=document.createElement("canvas");
      maskCanvas.style="pointer-events: none; z-index: 100000; position: absolute; left: 0px; top: 500px; width: 100px; height: 100px; background: rgba(150, 150, 150, 0.2);";
        maskCanvas.width=100;
        maskCanvas.height=100;
        var maskContext=maskCanvas.getContext("2d");
        var img=new Image();
        img.onload=function(){


            maskContext.globalAlpha =0.1;
            maskContext.beginPath();
            maskContext.drawImage(img,20,20,60,60);
            maskContext.closePath();
            maskContext.save();


            maskContext.globalAlpha =1;
            maskContext.beginPath();
            maskContext.drawImage(img,50,20,60,60);
            maskContext.closePath();
            maskContext.save();


        }
        img.src="comp/mu.png";
        document.body.appendChild(maskCanvas);
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章