HTML5 canvas basic drawing graphic combination-H5 Tutorial-php.cn

HTML5 canvas basic drawing graphic combination

黄舟

Release： 2017-02-23 13:56:56

Original

2376 people have browsed it

is just a container for drawing graphics. In addition to attributes such as id, class, style, etc., it also has height and width attributes. There are three main steps for drawing on the

<!DOCTYPE html>  

    <html lang="en">  

    <head>  

        <meta charset="UTF-8">  

        <title>图形组合</title>  

        <style type="text/css">  

            #canvas{   

                border: 1px solid #1C0EFA;   

                display: block;   

                margin: 20px auto;   

            }   

            #buttons{   

                width: 1000px;   

                margin: 5px auto;   

                clear:both;   

            }   

            #buttons a{   

                font-size: 18px;   

                display: block;   

                float: left;   

                margin-left: 20px;   

            }   

        </style>  

    </head>  

    <body>  

        <canvas id="canvas" width="1000" height="800">  

                你的浏览器还不支持canvas   

        </canvas>  

        <p id="buttons">  

            <a href="#">source-over</a>  

            <a href="#">source-atop</a>  

            <a href="#">source-in</a>  

            <a href="#">source-out</a>  

            <a href="#">destination-over</a>  

            <a href="#">destination-atop</a>  

            <a href="#">destination-in</a>  

            <a href="#">destination-out</a>  

            <a href="#">lighter</a>  

            <a href="#">copy</a>  

            <a href="#">xor</a>  

        </p>  

    </body>  

    <script type="text/javascript">  

      

    window.onload = function(){   

        draw("source-over");   

      

        var buttons = document.getElementById("buttons").getElementsByTagName("a");   

        for (var i = 0; i < buttons.length; i++) {   

            buttons[i].onclick = function(){   

                draw(this.text);   

                return false;   

            };   

        }   

    };   

      

        function draw(compositeStyle){   

            var canvas = document.getElementById("canvas");   

            var context = canvas.getContext("2d");   

      

            context.clearRect(0, 0, canvas.width, canvas.height);   

      

            //draw title   

            context.font = "bold 40px Arial";   

            context.textAlign = "center";   

            context.textBasedline = "middle";   

            context.fillStyle = "#150E0E";   

            context.fillText("globalCompositeOperation = "+compositeStyle, canvas.width/2, 60);   

      

            //draw a rect   

            context.fillStyle = "#F6082A";   

            context.fillRect(300, 150, 500, 500);   

      

            //draw a triangle   

            context.globalCompositeOperation = compositeStyle;   

            context.fillStyle = "#1611F5";   

            context.beginPath();   

            context.moveTo(700, 250);   

            context.lineTo(1000,750);   

            context.lineTo(400, 750);   

            context.closePath();   

            context.fill();   

        }   

      

    </script>  

    </html>

Copy after login

Readers can click on the label to observe different combination effects, the effect is as follows:

HTML5 canvas basic drawing graphic combination

The above is the content of the graphic combination of basic HTML5 canvas drawing. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!