1. Baru-baru ini saya menggunakan kanvas h5 untuk menggambar animasi dan menemukan bahwa gambarnya sangat buram. Belakangan, saya akhirnya menemukan bahwa pelakunya adalah kode <meta name=viewport content=width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no />, karena baris ini Kode diskalakan
2. Efek gambar buram:
3. Efek setelah melepas kompresi
Kode dapat diubah menjadi
<!DOCTYPE html><html><head> <meta charset=utf-8 /> <meta name=viewport content=user-scalable=no /> <title>Halaman detail acara</title> <script src=js/ rem.js type=text/javascript charset=utf-8></script> <link rel=stylesheet type=text/css href=css/m_reset.css /> <link rel=stylesheet type=teks/css href=css/gameListsNew.css /> <link href=css/mask.css rel=stylesheet /></head><body> <div class=tipMask> <div class=tipBox> <img src=img/faileTip.png class=tipsImg /> <div class=fileBtn> <img src=img/fileBtn.png /> <span class=tryAgain>Coba lagi</span> </div> </div> </div> <div> <img src=img/whiteBack.png class=titleImg / > <div class=bgEvent id=contentbody> <div id=eventDetail v-cloak> <!--Judul--> <div class=detailevent> <div kelas=judulvs> <img class=teamFlagLogo onerror=nofind(ini); :src='img/teamlogonew/'+eventDetail.HomeTeamID+'.png' /> <div class=countryName> {{eventDetail.HomeTeamName}} </ div> </div> <div class=titlevs style=padding-top:0.3rem;> <div> <!--Belum dimulai--> <!--<p class=theWorldCup>Piala Dunia</p>--> <p class=theGameNowDataTime>{{eventDetail.TimeFormat }}</p> <p class=gameBeginTime>{{getScoreOrVs(eventDetail.HomeTeamScore, eventDetail .AwayTeamScore)}}</p> </div> <!--Durasi mulai--> <!--<div> <p>73:40</p> </div>--> </div> <div class=titlevs> <img class=teamFlagLogo onerror=nofind(ini); .AwayTeamID+'.png' /> <div class=countryName> {{eventDetail.AwayTeamName}} </div> </div> </div> <div id=ordersuccess class=ordersuccess> <div style=text-align:right;padding-top:0.2rem;padding-left:0.2rem;> <img src=img/ordersuccess/close.png style=width:0.45rem; tinggi:0,45rem; id=closesuccess onclick=closesuccess(); /> </div> <div class=nama tim> <div class=teamnameitem><p class=teamnameitemtop>{{eventDetail.HomeTeamName}}</p><br /><p class=teamnameitembottom>HOME</p></div> <div class=teamnameitem ><p class=teamnameitemmiddle>VS</p></div> <div class=teamnameitem><p class=teamnameitemtop>{{eventDetail.AwayTeamName}}</p><br /><p class=teamnameitembottom>JAUH</p></div> </div> <div class=teamdetail> <div class=teamdate><span>{{eventDetail.CompetitionName}}</span><span>/</span><span>{{eventDetail.DateFormat}}</span></div> <div class=teamplaysselection> <gaya tabel=lebar:100%;perataan teks:kiri;tinggi:100%;> <tr> <td class=teamplaysselectiontop style=width:50%;>Cara bermain</td> <td class=teamplaysselectiontop style=width:50%;>Pilihan</td> </tr> <tr> <td class=teamplaysselectionbottom style=width:50 %; id=namaaturan>Peluang Pertandingan</td> <td class=teamplaysselectionbottom style=width:50%; id=namapilihan>Beranda</td> </tr> </tabel> </div> <div class=teamwinmoney> <gaya tabel=lebar:90%;text-align:left;height:100%;> <tr > <td class=teamwinmoneytop style=width:50%;> Kepala Sekolah</td> <td class=teamwinmoneytop style=width:50%;> Peluang</td> <td class=teamwinmoneytop style=width:50%;> Pra-menang</td> </tr> <tr> <td class=teamwinmoneybottom style=width:50%; id=betmoneysuc>1000</td> <td kelas =teamwinmoneybottom style=lebar:50%; id=betodds>12,54</td> <td class=teamwinmoneybottom style=width:50%; id=betwin>12540</td> </tr> </tabel> </div> </div> </div> </div> <div> <div class= id persegi=persegi> <kanvas id=courtCaseNew lebar=980 tinggi=765></kanvas> </div> <img src=img/balllittle.png style=width:20px;height:20px;display:none; id=imgballNew /> </div> <div class=middlechat> <div class=middleitem id=jcc> <p class=tabActive>Bidang Taruhan</p> </div> <div class=middleitem id=jcjl> <p class=tabCommon>Rekor taruhan</p> </div> <div class=middleitem id=sssj> <p class=tabCommon>Peristiwa</p> </div> <div class=middleitem id=jstj> <p class=tabCommon>Statistik Teknis</p> </div> </div div> <div class=downChangrTab kuisGaya permainan=tampilan: blok;> <div id=ruleTypeItems v-cloak> <!--menang, seri, kalah--> <div class=diffPlaysTetx v-for=(item,index) di eventDetail.Market v-if=item.RuleType==100> <span class=speciesName>Hasil</span> <span class=rotary v-if=item State !=1>(Tertutup)</span> <span class=speciesExp>Tebak hasil kedua tim dalam 90 menit (termasuk waktu tambahan)</span> </div> <div v-for=(item,index) di eventDetail.Market v-if=item.RuleType==100 id=nama hasil=selectionItems class=result> <div v-bind:class=[(select.BackOdds<1.01 || item.State!=1) ? 'resuitemGray commonBorderGray':'resuitem commonBorder'] v-for=(pilih,indeks) di item.Selection v-on:click=select.BackOdds>=1.01 &&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,'Result' , pilih.SelectionName); nama=itemSelection> <p class=winEquLose v-bind:name='item'+item.MarketId>{{select.SelectionName}}</p> <p class=winEquLoseOdds v-bind:name='item'+item.MarketId> <span v-bind: id=item.MarketId+pilih.SelectionId v-bind:maxlimit=select.MaxStakeLimit>{{select.BackOdds}}</span> <img src=img/upIng.png style=width:0.2rem;display:none; +item.MarketId+select.SelectionId /> <img src=img/downIng.png style=width:0.2rem;display:none; v-bind:id='greenOne'+item.MarketId+select.SelectionId /> </p> </div> </div> <!--Ganjil dan genap- -> <div class=diffPlaysTetx v-for=(item,index) di eventDetail.Market v-if=item.RuleType==130> <span class=speciesName>Ganjil dan Genap</span> <span class=rotary v-if=item.State!=1>(Tutup)</span> <span class=speciesExp>Tebak waktu 90 menit (termasuk waktu penghentian) permainan Total gol ganjil dan genap</span> </div> <div id=oddeven v-for=(item,index) di eventDetail.Market v-if=item.RuleType==130 nama=selectionItems class=oddeven> <div v-bind:class=[(select.BackOdds<1.01 || item.State!=1) ? 'oddevenitemGray commonBorderGray':'oddevenitem commonBorder'] v-for=(pilih,indeks ) di item.Selection v-on:click=select.BackOdds>=1.01 &&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,'ganjil dan genap',select.SelectionName) name=itemSelection> <p class=winEquLose v-bind:name='item'+ barang .MarketId v-bind:id='selectionname'+item.MarketId+select.SelectionId>{{select.SelectionName}}</p> <p class=winEquLoseOdds v-bind:name='item'+item.MarketId> <span v-bind:id=item.MarketId+pilih.SelectionId v-bind:maxlimit=select.MaxStakeLimit>{{select.BackOdds}}</span> <img src=img/upIng.png style=width:0.2rem;display:none; +item.MarketId+select.SelectionId /> <img src=img/downIng.png style=width:0.2rem;display:none; v-bind:id='greenOne'+item.MarketId+select.SelectionId /> </p> </div> </div> <!--Total sasaran- - > <div class=diffPlaysTetx v-for=(item,index) di eventDetail.Market v-if=item.RuleType==410> <span class=speciesName>Total gol</span> <span class=rotary v-if=item.State!=1>(Tutup)</span> <span class=speciesExp>Tebak 90 menit (termasuk waktu penghentian) Jumlah total jumlah gol dalam permainan</span> </div> <div id=totalGoals v-for=(item,index) di eventDetail.Market v-if=item.RuleType==410 nama=selectionItems class=totalGoals> <div v-bind:class=[(select.BackOdds<1.01 || item.State!=1) ? 'totalGoalitemGray commonBorderGray':'totalGoalitem commonBorder'] v-for=(pilih,indeks ) di item.Selection v-on:click=select.BackOdds>=1.01 &&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,'Total Goals',select.SelectionName) name=itemSelection> <p class=winEquLose v-bind:name='item'+ item .MarketId v-bind:id='selectionname'+item.MarketId+select.SelectionId>{{select.SelectionName}}</p> <p class=winEquLoseOdds v-bind:name='item'+item.MarketId> <span v-bind:id=item.MarketId+pilih.SelectionId v-bind:maxlimit=select.MaxStakeLimit>{{select.BackOdds}}</span> <img src=img/upIng.png style=width:0.2rem;display:none; +item.MarketId+select.SelectionId /> <img src=img/downIng.png style=width:0.2rem;display:none; v-bind:id='greenOne'+item.MarketId+select.SelectionId /> </p> </div> </div> <!--Skor penuh- - > <div class=diffPlaysTetx v-for=(item,index) di eventDetail.Market v-if=item.RuleType==140> <span class=speciesName>Skor penuh waktu</span> <span class=rotary v-if=item.State!=1>(Tutup)</span> <span class=speciesExp>Tebak 90 menit (termasuk waktu penghentian) Penuh skor</span> </div> <div id=trueScoreHome v-for=(item,index) di eventDetail.Market v-if=item.RuleType==140 name=selectionItems class=trueScoreHomeAway> <div v-bind:class=[(select.BackOdds<1.01 || item.State!=1) ? 'trueScoreitemGray commonBorderGray':'trueScoreitem commonBorder'] v-for=(pilih, indeks) dalam item .Seleksi v-on:klik=pilih.BackOdds>=1.01 &&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,'skor penuh',select.SelectionName) name=itemSelection> <p class=winEquLose v-bind:name='item'+ item .MarketId v-bind:id='selectionname'+item.MarketId+select.SelectionId>{{select.SelectionName}}</p> <p class=winEquLoseOdds v-bind:name='item'+item.MarketId> <span v-bind:id=item.MarketId+pilih.SelectionId v-bind:maxlimit=select.MaxStakeLimit>{{select.BackOdds}}</span> <img src=img/upIng.png style=width:0.2rem;display:none; +item.MarketId+select.SelectionId /> <img src=img/downIng.png style=width:0.2rem;display:none; v-bind:id='greenOne'+item.MarketId+select.SelectionId /> </p> </div> </div> <div class=downImg onclick=clickImg ()> <img src=img/toDown.png /> </div> <!--Tujuan berikutnya--> <div class=diffPlaysTetx v-for=(item,index) di eventDetail.Market v-if=item.RuleType==350> <span class=speciesName>Tujuan Berikutnya</span> <span class=rotary v-if=item.State != 1>(Tertutup)</span> <span class=speciesExp>Tebak tim yang akan mencetak gol berikutnya dalam 90 menit (termasuk waktu tambahan)</span> </div> <div id=nextgoal v-for=(item,index) di eventDetail.Market v-if=item.RuleType==350 nama=selectionItems class=result> <div v-bind:class=[(select.BackOdds<1.01 || item.State !=1) ? 'resutitemGray commonBorderGray':'resutitem commonBorder'] v-for=(pilih,indeks) di item.Selection v-on:click=select.BackOdds>=1,01 &&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,'Next Goal',select.SelectionName) name=itemSelection > < p kelas=winEquLose v-bind:nama='item'+item.MarketId v-bind:id='selectionname'+item.MarketId+select.SelectionId>{{select.SelectionName}}</p> <p class=winEquLoseOdds v-bind:name='item'+item.MarketId> <span v-bind:id=item.MarketId+pilih.SelectionId v-bind:maxlimit=select.MaxStakeLimit>{{select.BackOdds}}</span> <img src=img/upIng.png style=width:0.2rem;display:none; +item.MarketId+select.SelectionId /> <img src=img/downIng.png style=width:0.2rem;display:none; v-bind:id='greenOne'+item.MarketId+select.SelectionId /> </p> </div> <kelas div= style=width: 100%;tinggi :0.45rem;></div> </div> <div class=perchDiv style=lebar: 100%;height:3rem;></div> </div> </div> <!--Catatan tebakan--> <div class=downChangrTab tebakRecord> <div class=hide-body id=dialogorders> <div class =tableNameGuess> <li>Cara bermain</li> <li>Opsi</li> <li>Peluang</li> <li>Bonus</li> <li>Hasil</li> </div> < jalan style=latar belakang:#FFFFFF;height:4.79rem;overflow: scroll;> <div class=guessedLists id=contentOrders v-for=(item,index) dalam pesanan> <li> {{item.MarketName}} </li > <li> {{item.SelectionName}} </li> <li> {{item.FillPrice}} </li> <li> {{item.FillAmount}} </li> <li> <p v-if=item.Status == '0'> Konfirmasi tertunda</p> <p v-else-if=item.Status == '1 '>Pesan Oke</p> <p v-else-if=item.Status == '2'>{{item.NetReturn}}</p> <p v-else-if=item.Status == '3'>Pesanan telah dibatalkan</p> <p v-else-if=item.Status == '4'>Pesanan tidak valid</p> <p v-else=item.Status = = '5 '>Pesanan ditolak, peristiwa penting terjadi selama periode penundaan taruhan, dll.</p> </li> </div> </ul> </div> </div> <!--Event acara--> <div class =downChangrTab style=display: tidak ada; v-if=> <div class=login-body id=contentCases> <tabel kelas=whatHappen v-if=cases.length >0> <tr> <td></td> <td class=happenedMiddle> <kelas div =happenedMiddle_top style=margin-top: 0.4rem;></div> </td> <td></td> </tr> </table> <table class=whatHappen style= v-for=(item,index) dalam kasus border=0 Cellspacing=0 cellpadding=0> <tr> <td></td> <td class=happenedMiddle> <div class=happenedMiddle_line></div> < /td> <td></td> </tr> <tr v-if=item.CaseDescription.indexOf('main')>-1> <td class=eventsHappendLeft_things> <div class=eventsText> <p class=eventsTextLeft_time>{{item.CaseMinutes}}'</p> <p class=eventsTextLeft_Country>{{item.CaseDescription}}</p> </div> < /td> <td class=happenedMiddle> <div class=eventsHappend_img> <img :src=GetMatchEventImg(item.CaseDescription) /> </div> </td> <td></td> </tr> <tr v-if=item.CaseDescription.indexOf('客')>- 1> <td></td> <td class=happenedMiddle> <div class=eventsHappend_img> <img :src=GetMatchEventImg(item.CaseDescription) /> </div> </td> <td class=eventsHappendRight_things> <div class=eventsText> <p class=eventsTextRight_Country>{{item.CaseDescription}}</p> <p class=eventsTextRight_time>{{item.CaseMinutes}}'</p> </div> </td> </tr> <tr v-if=item.CaseDescription.indexOf('main')<0 && item.CaseDescription.indexOf('main')<0> <td></td > <td> <a class=ti tlefoc>{{item.CaseMinutes}}'</a> <a class=titlefoc>{{item.DesChina}}</a> </td> <td></td> </tr> </tabel> <tabel class=whatHappen v-if=cases.length >0> <tr> <td></td> <td class=happenedMiddle> <div class=happenedMiddle_line></div> <div class=happenedMiddle_top></div> </td> <td></td> </tr> </tabel> <!--<div style=width: 100%; tinggi: 2,7rem;></div>--> </div> </div> <!--Statistik Teknis--> <div class=downChangrTab style=display: none;> < div class=skillInfoGaryBg id=stutsskillsData> <div class=skillInfo v-for=(item, indeks) di skillsData> <li class=shotsOnTargets> <div class=shotsOnTargets_left> <p class=skillsTextFonts>{{item.AwayTeamValue}}</p> <div class=sotl_bg> <div class=sotl_bgProgress></div> </div> </div > <div class=shotsOnTargets_middle> <img :src=GetMatchStatsImage(item.StatsType) /> <p class=shills_name>{{item.StatsType}}</p> </div> <div class=shotsOnTargets_right> <p class=skillsTextFonts>{{item.HomeTeamValue} }</p> <div class=sotl_bg> <div class=sotl_bgProgress></div> </div> </div> </li> </div> </div> </div> </div> <!--Urutan terbawah--> <div class=buttomOrder> <!--Jumlah masukan - -> <!--Jumlah taruhan--> <div class=aboutMoney> <tipe input=nama teks= id=betmoney class=gussMoney value=Jumlah taruhan placeholder= readonly=readonly v-model=gussMoney /> <img src=img/clearBetMoney.png class=clearGussMoney id=clearGussMoney /> <!--Balance--> <span class=balanceMoney id=minemoney>Saldo saya: 888</span> <!--Jumlah taruhan -- > <div class=diffGussMoney style=text-align:center;> <ul> <li name=bettingmoney class=difGuMonCom val=100>+100</li> <li name=bettingmoney class=difGuMonCom val=500>+500</li> <li name=bettingmoney class=difGuMonCom val=1000>+1000</li> <li class= difGuMonCom id=allin style=tinggi garis: 0,5rem;> <p style=tinggi: 0.3rem;>Semua <span style=margin-left: 0.05rem;>di</span></p> <p id=allinvalue style=height: 0.3rem;>100</p> </li> </ p> ul> </div> <!--OK--> <p class=subSure subSureRed style=text-align:center; id=subSure> OK</p> </div> </div> <!--Lapisan masker setelah pemesanan berhasil--> <div id=overlay class=overlay></div> </div> <div > < img src=img/goal/goalball.png /> <img src=img/goal/goal.png /> <img src=img/goal/fireworks.png /> </div> <skrip src=js/jquery-1.10.2.min.js tipe=teks/javascript charset=utf-8></script> <skrip src=js/vue.min.js tipe=teks/javascript charset=utf-8></script> <skrip src=js/common.js?ver=012902 type=teks/javascript charset=utf-8></script> <skrip src=js/jquery.cookie.min.js></script> <skrip src=js/mask.js?ver=012901></script> <tipe skrip= teks/javascript src=js/eventDetailsNew.js?ver=012908></script> <skrip src=../js/animation.js></script></body></html> MeringkaskanDi atas adalah solusi sempurna untuk keburaman gambar Kanvas HTML5 yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!