Teach you how to draw a greedy watermelon using HTML5-H5 Tutorial-php.cn

Teach you how to draw a greedy watermelon using HTML5

藏色散人

Release： 2021-08-11 14:46:29

Original

2380 people have browsed it

How can we miss out on the cold watermelon on a hot summer day? When we master the function of a certain program, we always want to achieve strange effects, haha, so today, as the title says, we will use HTML5 to realize a semi-circular arc watermelon (without seeds hehe).

I don’t know how much you know about HTML5. Maybe you can write a code locally that can realize the semi-circular watermelon style. A little reminder: the typical color scheme of watermelon is red and green~

The following is an implementation method I gave. You can directly copy the code and test it locally:

The code is as follows:

<!DOCTYPE HTML>
<html>
<head>
    <script>
        window.onload = function()
        {
            canvas = document.getElementById("canvasArea");
            context = canvas.getContext("2d");
            drawArc ( 100, 25, 80, 0, 180, false, "#97C30A", "#FF717E");
            function drawArc(xPos, yPos, radius, startAngle, endAngle,
                             anticlockwise, lineColor, fillColor)
            {
                var startAngle = startAngle * (Math.PI/180);
                var endAngle = endAngle * (Math.PI/180);
                var radius = radius;

                context.strokeStyle = lineColor;
                context.fillStyle = fillColor;
                context.lineWidth = 8;
                context.beginPath();
                context.arc(xPos, yPos, radius, startAngle, endAngle, anticlockwise);
                context.fill();
                context.stroke();
            }
        }
    </script>
</head>
<body>
<div style = "width:240px; height:140px; margin:0 auto; padding:5px;">
    <canvas id = "canvasArea" width = "210" height = "130"
            style = "border:2px solid black">
        你的浏览器目前不支持HTML5 Canvas。
    </canvas>
</div>
</body>
</html>

Copy after login

The effect is as follows:

Teach you how to draw a greedy watermelon using HTML5

Forget it~ Is it a greedy watermelon hahaha~

The main knowledge point that everyone needs to master here is the HTML5 canvas element;

HTML5 canvas element uses Used to draw graphics, animations, dynamic images, charts, and text to enhance user experience.

Introduction to canvas: The HTML5 canvas element uses JavaScript to draw images on web pages. The canvas is a rectangular area that you can control every pixel of. canvas has many ways to draw paths, rectangles, circles, characters, and add images.

We can use the arc() method to draw arcs on the canvas.

arc() Syntax

arc(x, y, radius, startAngle, endAngle, anticlockwise)

Copy after login

Here, x and y are the coordinates of the center of the circle, radius is the radius of the circle, and the startAngle and endAngle parameters are the starting point and end point of the arc. , in radians from the x-axis. The counterclockwise parameter is a Boolean value when the arc is actually drawn counterclockwise, otherwise in a clockwise direction.

Related recommendations: "HTML video tutorial" "javascript basic tutorial"

The above is the detailed content of Teach you how to draw a greedy watermelon using HTML5. For more information, please follow other related articles on the PHP Chinese website!