javascript - 求問,什麼方法能畫出如圖紅色框中的條狀光線

Question

#在專案中被要求說繪製如圖紅框中的條狀光線,我嘗試過一些方法都不能完全實現,特別是兩端的尾巴部分.當然我也知道img轉css是最快的,但是轉換出來的程式碼之大,也是被駁回了.所以我很好奇,真的有css或者canvas的方法能實現麼?

Answer 1

canvas，直接把圖片畫上去

Answer 2

你也可以使用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%);
        
        }

建議你閱讀：ww.w3cplus.com/css3/new-css3-linear-gradient.html