1.save(), restore()

<! DOCTYPEhtml>
<html>

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

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</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); // Draw a rectangle using the default Settings
                ctx.save(); // Save the default state

                ctx.fillStyle = 'red' // Change the color based on the original configuration
                ctx.fillRect(15.15.120.120); // Draw a rectangle with the new Settings

                ctx.save(); // Save the current state
                ctx.fillStyle = '#FFF' // Change the color configuration again
                ctx.fillRect(30.30.90.90); // Draw a rectangle with the new configuration

                ctx.restore(); // Reload the previous color state
                ctx.fillRect(45.45.60.60); // Draw a rectangle using the previous configuration

                ctx.restore(); // Load the default color configuration
                ctx.fillRect(60.60.30.30); // Draw a rectangle with loaded configuration}});var init = function() { myAction.initCanvas(); } (); })</script>
</body>

</html>
Copy the code

2.translate()

<! DOCTYPEhtml>
<html>

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

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</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(); // Save the state before the origin shift
                ctx.translate(100.100);
                ctx.strokeRect(0.0.100.100)
                ctx.restore(); // Restore to original state
                ctx.translate(220.220);
                ctx.fillRect(0.0.100.100)}});var init = function() { myAction.initCanvas(); } (); })</script>
</body>

</html>
Copy the code

3.rotate()

<! DOCTYPEhtml>
<html>

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

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</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>
Copy the code

4.transform()

<! DOCTYPEhtml>
<html>

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

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</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>
Copy the code

5. Merger

<! DOCTYPEhtml>
<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;">Your browser does not support the HTML5 canvas tag.</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]; // Global composition operation
                    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>
Copy the code

6.clip()

<! DOCTYPEhtml>
<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;">Your browser does not support the HTML5 canvas tag.</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>
Copy the code