Apprenez à dessiner une pastèque gourmande en utilisant HTML5-Tutoriel H5-php.cn

Apprenez à dessiner une pastèque gourmande en utilisant HTML5

藏色散人

Libérer： 2021-08-11 14:46:29

original

2371 Les gens l'ont consulté

Par une chaude journée d'été, que pouvons-nous faire sans une pastèque froide ? Lorsque nous maîtrisons les fonctions d'un certain programme, nous voulons toujours obtenir des effets étranges, haha, alors aujourd'hui, comme le titre l'indique, nous allons utiliser HTML5 pour réaliser une pastèque en arc semi-circulaire (sans graines hehe).

Je ne sais pas ce que vous savez sur HTML5. Vous pouvez peut-être écrire localement un code capable de réaliser le style pastèque en demi-arc. Un petit rappel : la correspondance de couleurs typique de la pastèque est le rouge et le vert~

Ce qui suit. c'est ce que j'ai donné Une méthode d'implémentation, vous pouvez directement copier le code et le tester localement :

Le code est le suivant :

<!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>

Copier après la connexion

L'effet est le suivant :

Apprenez à dessiner une pastèque gourmande en utilisant HTML5

Oubliez ça~ Est-ce une pastèque gourmande hahaha ~

La principale chose dont vous avez besoin ici est un point de connaissance à maîtriser est l'élément HTML5 Canvas ;

L'élément HTML5 Canvas est utilisé pour dessiner des graphiques, des animations, des images dynamiques, des graphiques et du texte pour améliorer l'expérience utilisateur.

Introduction à Canvas : L'élément Canvas de HTML5 utilise JavaScript pour dessiner des images sur des pages Web. Le canevas est une zone rectangulaire dont vous pouvez contrôler chaque pixel. Canvas propose de nombreuses façons de dessiner des chemins, des rectangles, des cercles, des personnages et d'ajouter des images.

Nous pouvons utiliser la méthode arc() pour dessiner des arcs sur le canevas. arc()方法在画布上绘制弧线。

arc()

Syntaxe arc()

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

Copier après la connexion

Ici, x et y sont les coordonnées du centre du cercle, radius est le rayon du cercle, et les paramètres startAngle et endAngle sont le début et la fin points de l'arc, en radians à partir de l'axe des x comme unité. Le paramètre antihoraire est une valeur booléenne lorsque l'arc est réellement dessiné dans le sens inverse des aiguilles d'une montre, sinon dans le sens des aiguilles d'une montre.