Lukis pepenjuru bulatan kecerunan dengan JavaScript-tutorial js-php.cn

Lukis pepenjuru bulatan kecerunan dengan JavaScript

藏色散人

Lepaskan： 2021-08-06 15:19:07

asal

2143 orang telah melayarinya

Dalam artikel sebelum ini "Pelaksanaan JS yang Seronok: Berikan Anda Wajah Tersenyum dengan Cermin Mata", saya memperkenalkan anda cara menggunakan JS untuk melukis muka tersenyum dengan cermin mata Ia cukup menyeronokkan~ Rakan-rakan yang berminat boleh lihatlah, haha~ Kemudian artikel ini akan terus memperkenalkan anda kepada kaedah lukisan yang menarik.

Topik artikel hari ini ialah "Tulis program JavaScript untuk melukis angka berikut [garisan pepenjuru, putih ke bulatan hitam]."

Lukis pepenjuru bulatan kecerunan dengan JavaScript

Mungkin anda tidak tahu apa yang anda ingin capai apabila anda mula-mula membaca tajuknya, tetapi kini gambar ini sepatutnya sangat jelas dan boleh difahami! Anda boleh mencuba cara menggunakan js untuk merealisasikan pemaparan ini secara setempat.

Berikut ialah kaedah pelaksanaan saya:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="myCanvas" width="1500" height="800">
    <p>更新您的浏览器!</p>
</canvas>
<script>
    function draw()
    {
        var ctx = document.getElementById("myCanvas").getContext("2d");
        var counter = 0;
        for (var i=0;i<6;i++)
        {
            for (var j=0;j<6;j++)
            {
                //从白到黑
 ctx.fillStyle = "rgb(" + Math.floor(255-42.5*i) + "," + Math.floor(255-42.5*i) +
 "," + Math.floor(255-42.5*j) + ")";
                ctx.beginPath();
                if (i === counter && j === counter)
                {
                    //创建圈
 ctx.arc(25+j*50,30+i*50,20,0,Math.PI*2,true);
                    ctx.fill();
                    //在圆圈周围创建一个边框，这样白色的会可见
 ctx.stroke();
                }
            }
            counter++;
        }
    }
    draw();
</script>
</body>
</html>

Salin selepas log masuk

Baiklah, mari jalankan kod ini secara langsung, kesannya adalah seperti berikut:

Lukis pepenjuru bulatan kecerunan dengan JavaScript

Pengenalan ringkas kepada kaedah yang terlibat:

kaedah getElementById() : mengembalikan rujukan kepada objek pertama dengan ID yang ditentukan

kaedah getContext() : mengembalikan rujukan untuk Persekitaran untuk melukis pada kanvas;

kaedah lantai(): boleh membundarkan nombor; >

Atribut fillStyle: Tetapkan atau kembalikan warna, kecerunan atau corak yang digunakan untuk mengisi lukisan itu; () kaedah: mencipta lengkok/lengkung (digunakan untuk mencipta bulatan atau bulatan separa); Warna lalai ialah hitam.

Akhir sekali, saya ingin mengesyorkan "

Tutorial Asas JavaScript

"~ Selamat datang semua untuk belajar~

Atas ialah kandungan terperinci Lukis pepenjuru bulatan kecerunan dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!