javascript - Apakah kaedah yang boleh digunakan untuk melukis jalur cahaya dalam kotak merah dalam gambar?-Soal Jawab Rangkaian PHP Cina

Artikel Topik pembelajaran Muat turun Soal Jawab Kamus Pengaturcaraan Permainan kemas kini terkini

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

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

三叔 2017-06-15 09:23:32

774

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

三叔

membalas semua (2)

伊谢尔伦2017-06-15 09:25:32 Tingkat 2

kanvas, lukis gambar terus

Suka+0

Tambah Balasan

大家讲道理2017-06-15 09:25:32 Tingkat 1

Anda juga boleh menggunakan kecerunan css

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%); }