Canvas库fabric.js范例 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wafer Map</title>
    <script src="./fabric.min.js"></script>
</head>

<body>
    <!--border-radius: 50% 50%;-->
    <canvas id="c" width="1200" height="1200" style="border:1px solid #ccc;"></canvas>
    <script>
        var radius = 300;
        var radius_2 = radius * 2;
        var radis_pow = radius * radius;

        function isPointInCircle(r, w, h) {
            return r >= w * w + h * h;
        }

        fabric.Object.prototype.noScaleCache = false;

        var canvas = this.__canvas = new fabric.Canvas('c');
        var shotWidth = radius_2 / 17;
        var shotHeight = radius_2 / 10;

        var dieWidth = radius_2 / 34;
        var dieHeight = radius_2 / 30;



        for (let x = 0; x < 34; x++) {
            var l = x * dieWidth;

            var w1 = (x - 17) * dieWidth;
            var w2 = (x - 16) * dieWidth;
            // if (x > 0) {
            //     w1 = (x - 17) * dieWidth;
            //     w2 = (x - 16) + dieWidth;
            // }
            // if (l >= 510) {
            //     x2 = x1 + dieWidth;
            // }

            for (let y = 0; y < 30; y++) {
                var t = y * dieHeight;
                var h1 = (y - 15) * dieHeight;
                var h2 = (y - 14) * dieHeight;
                var fill = undefined;
                console.log(w1, h1);
                console.log(w1, h2);
                console.log(w2, h1);
                console.log(w2, h2);
                if (isPointInCircle(radis_pow, w1, h1) && isPointInCircle(radis_pow, w1, h2) && isPointInCircle(radis_pow, w2, h1) && isPointInCircle(radis_pow, w2, h2)) {

                    fill = "#A6D1E6"
                }
                var option = {
                    top: t,
                    left: l,
                    width: dieWidth,
                    height: dieHeight,
                    stroke: 'lightgray',
                    // strokeWidth: 1,
                    fill: fill,
                };
                canvas.add(new fabric.Rect(option));
            }
        }


        for (let x = 0; x < 17; x++) {
            var l = x * shotWidth;
            for (let y = 0; y < 10; y++) {
                var t = y * shotHeight;
                var option = {
                    top: t,
                    left: l,
                    width: shotWidth,
                    height: shotHeight,
                    stroke: '#3AB4F2',
                    // strokeWidth: 1,
                    fill: undefined,
                };
                canvas.add(new fabric.Rect(option));
            }
        }

        canvas.add(new fabric.Circle({
            radius: radius,
            fill: '#FFF',
            left: 0,
            stroke: '#2C3333',
            strokeWidth: 1,
            fill: undefined,
        }));


    </script>
</body>

</html>
posted @ 2022-07-21 23:52  最美分享Coder  阅读(157)  评论(0)    收藏  举报