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

2236 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.

Recommandations associées : "Tutoriel vidéo HTML" "Tutoriel de base Javascript
"

🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Apprenez à dessiner une pastèque gourmande en utilisant HTML5