canvas基础三

1.save(), restore()

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas</title>
</head>

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function() {
        var myAction = {},
            ctx;

        var dom = {
            canvas: $('#myCanvas')
        };

        $.extend(myAction, {
            initCanvas: function() {
                ctx = dom.canvas[0].getContext("2d");

                ctx.fillRect(0, 0, 150, 150); // 使用默认设置绘制一个矩形
                ctx.save(); // 保存默认状态

                ctx.fillStyle = 'red' // 在原有配置基础上对颜色做改变
                ctx.fillRect(15, 15, 120, 120); // 使用新的设置绘制一个矩形

                ctx.save(); // 保存当前状态
                ctx.fillStyle = '#FFF' // 再次改变颜色配置
                ctx.fillRect(30, 30, 90, 90); // 使用新的配置绘制一个矩形

                ctx.restore(); // 重新加载之前的颜色状态
                ctx.fillRect(45, 45, 60, 60); // 使用上一次的配置绘制一个矩形

                ctx.restore(); // 加载默认颜色配置
                ctx.fillRect(60, 60, 30, 30); // 使用加载的配置绘制一个矩形
            }
        });

        var init = function() {
            myAction.initCanvas();
        }();
    })
    </script>
</body>

</html>

2.translate()

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas</title>
</head>

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function() {
        var myAction = {},
            ctx;

        var dom = {
            canvas: $('#myCanvas')
        };

        $.extend(myAction, {
            initCanvas: function() {
                ctx = dom.canvas[0].getContext("2d");

                ctx.save(); //保存坐原点平移之前的状态
                ctx.translate(100, 100);
                ctx.strokeRect(0, 0, 100, 100)
                ctx.restore(); //恢复到最初状态
                ctx.translate(220, 220);
                ctx.fillRect(0, 0, 100, 100)
            }
        });

        var init = function() {
            myAction.initCanvas();
        }();
    })
    </script>
</body>

</html>

3.rotate()

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas</title>
</head>

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function() {
        var myAction = {},
            ctx;

        var dom = {
            canvas: $('#myCanvas')
        };

        $.extend(myAction, {
            initCanvas: function() {
                ctx = dom.canvas[0].getContext("2d");

                ctx.fillStyle = "red";
                ctx.save();

                ctx.translate(100, 100);
                ctx.rotate(Math.PI / 180 * 45);
                ctx.fillStyle = "blue";
                ctx.fillRect(0, 0, 100, 100);
                ctx.restore();

                ctx.save();
                ctx.translate(0, 0);
                ctx.fillRect(0, 0, 50, 50)
                ctx.restore();
            }
        });

        var init = function() {
            myAction.initCanvas();
        }();
    })
    </script>
</body>

</html>

4.transform()

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas</title>
</head>

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function() {
        var myAction = {},
            ctx;

        var dom = {
            canvas: $('#myCanvas')
        };

        $.extend(myAction, {
            initCanvas: function() {
                ctx = dom.canvas[0].getContext("2d");

                //transform()各参数的含义：
                //Horizontal scaling, Horizontal skewing, Vertical skewing, Vertical scaling, Horizontal moving, Vertical moving
                ctx.transform(2, 0.5, 0.5, 2, 50, 50);
                ctx.fillRect(0, 0, 100, 100);
            }
        });
        var init = function() {
            myAction.initCanvas();
        }();
    })
    </script>
</body>

</html>

5.合并

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas</title>
</head>

<body>
    <div id='m-type'></div>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function() {
        var myAction = {},
            ctx;

        var dom = {
            type: $('#m-type'),
            canvas: $('#myCanvas')
        };

        $.extend(myAction, {
            initCanvas: function() {
                ctx = dom.canvas[0].getContext("2d");

                var arr = ['source-over', 'source-in', 'source-out', 'source-atop', 
                'destination-over', 'destination-in', 'destination-out', 'destination-atop',
                'lighter', 'darken', 'lighten', 'xor', 'copy'];
                var index = 0;
                setInterval(function () {
                    ctx.save();
                    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
                    ctx.fillStyle = "blue";
                    ctx.fillRect(0, 0, 200, 200);

                    ctx.globalCompositeOperation = arr[index]; //全局合成操作
                    dom.type.text(arr[index]);
                    ctx.fillStyle = "red";
                    ctx.fillRect(100, 100, 200, 200);
                    ctx.restore();
                    index++;
                    if (index >= arr.length) {
                        index = 0;
                    }
                    
                }, 1000);

            }
        });
        var init = function() {
            myAction.initCanvas();
        }();
    })
    </script>
</body>

</html>

6.clip()

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas</title>
</head>

<body>
    <div id='m-type'></div>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function() {
        var myAction = {},
            ctx;

        var dom = {
            type: $('#m-type'),
            canvas: $('#myCanvas')
        };

        $.extend(myAction, {
            initCanvas: function() {
                ctx = dom.canvas[0].getContext("2d");

                ctx.beginPath();
                ctx.arc(100, 100, 100, 0, Math.PI * 1);
                ctx.arc(150, 100, 100, 0, Math.PI * 2);
                ctx.clip();

                ctx.fillStyle = "pink";
                ctx.fillRect(0, 0, 800, 800);
            }
        });
        var init = function() {
            myAction.initCanvas();
        }();
    })
    </script>
</body>

</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xutongbao/p/9924791.html