JSFiddle - React, Tailwind, and code Playground

by artwl

HTML

<canvas id="canvas"></canvas>
<div id="ret"></div>

CSS

body{
    background-color:#CCC;
}

JavaScript

var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, 300, 150);
ctx.globalCompositeOperation = 'destination-out';
ctx.fillRect(10, 10, 280, 130);
var transPercent = getTransparentPercent(ctx, c.width, c.height);
document.getElementById('ret').innerHTML = transPercent + '%区域透明';

function getTransparentPercent(ctx, width, height) {
    var imgData = ctx.getImageData(0, 0, width, height),
        pixles = imgData.data,
        transPixs = [];
    for (var i = 0, j = pixles.length; i < j; i += 4) {
        var a = pixles[i + 3];
        if (a == 0) {
            transPixs.push(i);
        }
    }
    return (transPixs.length / (pixles.length / 4) * 100).toFixed(2);
}