Ajar anda cara melukis tembikai yang tamak menggunakan HTML5-Tutorial H5-php.cn

Ajar anda cara melukis tembikai yang tamak menggunakan HTML5

藏色散人

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

asal

2343 orang telah melayarinya

Bagaimana kita boleh hidup tanpa tembikai sejuk pada hari musim panas? Apabila kita menguasai fungsi program tertentu, kita sentiasa mahu mencapai kesan pelik, haha, jadi hari ini, seperti tajuk, kita akan menggunakan HTML5 untuk merealisasikan tembikai lengkok separuh bulat (tanpa biji hehe).

Saya tidak tahu berapa banyak yang anda tahu tentang HTML5. Mungkin anda boleh menulis kod tempatan yang boleh merealisasikan gaya tembikai separuh lengkok. Sedikit peringatan: skema warna biasa tembikai ialah merah dan hijau

Berikut ialah kaedah pelaksanaan yang saya berikan Anda boleh terus menyalin kod dan mengujinya secara setempat:

Kodnya adalah seperti berikut:

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

Salin selepas log masuk

Kesannya ialah. seperti berikut:

Ajar anda cara melukis tembikai yang tamak menggunakan HTML5

Lupakan~ Adakah tembikai tamak hahaha~

Titik pengetahuan utama yang perlu dikuasai oleh semua orang di sini ialah elemen kanvas HTML5;

Elemen kanvas HTML5 digunakan untuk melukis grafik, animasi, imej dinamik, carta, teks untuk meningkatkan pengalaman pengguna.

Pengenalan kepada kanvas: Elemen kanvas HTML5 menggunakan JavaScript untuk melukis imej pada halaman web. Kanvas ialah kawasan segi empat tepat yang anda boleh mengawal setiap piksel. kanvas mempunyai banyak cara untuk melukis laluan, segi empat tepat, bulatan, aksara dan menambah imej.

Kita boleh menggunakan kaedah arc()方 untuk melukis arka pada kanvas. Sintaks

arc()

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

Salin selepas log masuk

Di sini, x dan y ialah koordinat pusat bulatan, jejari ialah jejari bulatan, dan parameter Sudut mula dan Sudut akhir ialah titik mula dan tamat lengkok, berjauhan dari x Paksi adalah dalam radian. Parameter lawan jam ialah nilai boolean apabila arka sebenarnya dilukis melawan arah jam, jika tidak mengikut arah jam.

Pengesyoran berkaitan: "Tutorial video HTML" "Tutorial asas JavaScript"

Atas ialah kandungan terperinci Ajar anda cara melukis tembikai yang tamak menggunakan HTML5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!