javascript - Apakah kaedah yang boleh digunakan untuk melukis jalur cahaya dalam kotak merah dalam gambar?

Question

Dalam projek itu, saya diminta untuk melukis jalur cahaya seperti yang ditunjukkan dalam kotak merah dalam gambar Saya mencuba beberapa kaedah tetapi tidak dapat menyedarinya sepenuhnya, terutamanya bahagian ekor di kedua-dua hujungnya, saya juga tahu bahawa menukar img kepada css adalah yang terpantas, tetapi penukaran Kod itu terlalu besar sehingga ia ditolak Jadi saya sangat ingin tahu, adakah benar-benar kaedah CSS atau kanvas untuk mencapainya

Answer 1

kanvas, lukis gambar terus

Answer 2

Anda juga boleh menggunakan kecerunan css

<p class="toLeft"></p>
<p class="toRight"></p>

p {
            width: 600px;
            height: 150px;
            border: 1px solid #666;
            line-height: 150px;
            text-align: center;
            font-weight: 900;
            font-size: 30px;
            color: #fff;
            margin: 10px auto;
        }
        .toLeft {
            background-image:-webkit-linear-gradient(
            to left, 
            rgba(255,0,0,0) 0%, 
            rgba(255,0,0,0.8) 7%, 
            rgba(255,0,0,1) 11%, 
            rgba(255,0,0,1) 12%, 
            rgba(255,252,0,1) 28%, 
            rgba(1,180,7,1) 45%, 
            rgba(0,234,255,1) 60%, 
            rgba(0,3,144,1) 75%, 
            rgba(255,0,198,1) 88%, 
            rgba(255,0,198,0.8) 93%, 
            rgba(255,0,198,0) 100%); 
            background-image:linear-gradient(
            to left, 
            rgba(255,0,0,0) 0%, 
            rgba(255,0,0,0.8) 7%, 
            rgba(255,0,0,1) 11%, 
            rgba(255,0,0,1) 12%, 
            rgba(255,252,0,1) 28%, 
            rgba(1,180,7,1) 45%, 
            rgba(0,234,255,1) 60%, 
            rgba(0,3,144,1) 75%, 
            rgba(255,0,198,1) 88%, 
            rgba(255,0,198,0.8) 93%, 
            rgba(255,0,198,0) 100%); 
        }

        .toRight {
            background-image:-webkit-linear-gradient(
            to right, 
            rgba(255,0,0,0) 0%, 
            rgba(255,0,0,0.8) 7%, 
            rgba(255,0,0,1) 11%, 
            rgba(255,0,0,1) 12%, 
            rgba(255,252,0,1) 28%, 
            rgba(1,180,7,1) 45%, 
            rgba(0,234,255,1) 60%, 
            rgba(0,3,144,1) 75%, 
            rgba(255,0,198,1) 88%, 
            rgba(255,0,198,0.8) 93%, 
            rgba(255,0,198,0) 100%);
            background-image: linear-gradient(
            to right, 
            rgba(255,0,0,0) 0%, 
            rgba(255,0,0,0.8) 7%, 
            rgba(255,0,0,1) 11%, 
            rgba(255,0,0,1) 12%, 
            rgba(255,252,0,1) 28%, 
            rgba(1,180,7,1) 45%, 
            rgba(0,234,255,1) 60%, 
            rgba(0,3,144,1) 75%, 
            rgba(255,0,198,1) 88%, 
            rgba(255,0,198,0.8) 93%, 
            rgba(255,0,198,0) 100%);
        
        }

Adalah disyorkan agar anda membaca: ww.w3cplus.com/css3/new-css3-linear-gradient.html