1. Récemment, j'utilisais le canevas h5 pour dessiner des animations et j'ai constaté que les images étaient particulièrement floues. Plus tard, j'ai finalement découvert que le coupable était le code <meta name=viewport content=width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no />, à cause de cette ligne, le code est mis à l'échelle
2. L'effet des images floues :
3. L'effet après suppression de la compression
Le code peut être modifié en
<!DOCTYPE html><html><head> <meta charset=utf-8 /> <meta name=viewport content=user-scalable=no /> <title>Page de détails de l'événement</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=text/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>Essayez à nouveau</span> </div> </div> </div> <div> <img src=img/whiteBack.png class=titleImg /> <div class=bgEvent id=contentbody> <div id=eventDetail v-cloak> <!--Title--> <div class=detailevent> <div class=titlevs> <img class=teamFlagLogo onerror=nofind(this); :src='img/teamlogonew/'+eventDetail.HomeTeamID+'.png' /> <div class=countryName> {{eventDetail.HomeTeamName}} </ div> </div> <div class=titlevs style=padding-top:0.3rem;> <div> <!--Pas encore démarré--> <!--<p class=theWorldCup>Coupe du Monde</p>--> <p class=theGameNowDataTime>{{eventDetail.TimeFormat }}</p> <p class=gameBeginTime>{{getScoreOrVs(eventDetail.HomeTeamScore, eventDetail .AwayTeamScore)}}</p> </div> <!--Durée de début--> <!--<div> <p>73:40</p> </div>--> </div> <div class=titlevs> <img class=teamFlagLogo onerror=nofind(this); .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; hauteur:0,45rem; id=closesuccess onclick=closesuccess(); /> </div> <div class=teamname> <div class=teamnameitem><p class=teamnameitemtop>{{eventDetail.HomeTeamName}}</p><br /><p class=teamnameitembottom>ACCUEIL</p></div> <div class=teamnameitem ><p class=teamnameitemmiddle>VS</p></div> <div class=teamnameitem><p class=teamnameitemtop>{{eventDetail.AwayTeamName}}</p><br /><p class=teamnameitembottom>À PARTIR</p></div> </div> <div class=teamdetail> <div class=teamdate><span>{{eventDetail.CompetitionName}}</span><span>/</span><span>{{eventDetail.DateFormat}}</span></div> <div class=teamplaysselection> <table style=width:100%;text-align:left;height:100%;> <tr> <td class=teamplaysselectiontop style=width:50%;>Comment jouer</td> <td class=teamplaysselectiontop style=width:50%;>Options</td> </tr> <tr> <td class=teamplaysselectionbottom style=width:50 %; id=rulename>Cotes de match</td> <td class=teamplaysselectionbottom style=width:50%; id=selectionname>Accueil</td> </tr> </table> </div> <div class=teamwinmoney> <table style=width:90%;text-align:left;height:100%;> <tr > <td class=teamwinmoneytop style=width:50%;> Principal</td> <td class=teamwinmoneytop style=width:50%;> Cotes</td> <td class=teamwinmoneytop style=width:50%;> Pré-gagnant</td> </tr> <tr> <td class=teamwinmoneybottom style=width:50%; id=betmoneysuc>1000</td> <td classe =teamwinmoneybottom style=largeur:50%; id=betodds>12.54</td> <td class=teamwinmoneybottom style=largeur:50%; id=betwin>12540</td> </tr> </table> </div> </div> </div> </div> <div> <div class= square id=square> <canvas id=courtCaseNew width=980 height=765></canvas> </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>Champ de paris</p> </div> <div class=middleitem id=jcjl> <p class=tabCommon>Record de paris</p> </div> <div class=middleitem id=sssj> <p class=tabCommon>Événements</p> </div> <div class=middleitem id=jstj> <p class=tabCommon>Statistiques techniques</p> </div> </div div> <div class=downChangrTab quizGames style=display: block;> <div id=ruleTypeItems v-cloak> <!--gagner, dessiner, perdre--> <div class=diffPlaysTetx v-for=(item,index) dans eventDetail.Market v-if=item.RuleType==100> <span class=speciesName>Résultats</span> <span class=rotary v-if=item State. !=1>(Fermé)</span> <span class=speciesExp>Devinez le résultat des deux équipes en 90 minutes (temps d'arrêt compris)</span> </div> <div v-for=(item,index) dans eventDetail.Market v-if=item.RuleType==100 id=result name=selectionItems class=result> <div v-bind:class=[(select.BackOdds<1.01 || item.State!=1) ? 'resuitemGray commonBorderGray':'resuitem CommonBorder'] v-for=(select,index) dans item.Selection v-on:click=select.BackOdds>=1.01 &&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,'Result' , select.SelectionName); nom=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+select.SelectionId v-bind:maxlimit=select.MaxStakeLimit>{{select.BackOdds}}</span> <img src=img/upIng.png style=width:0.2rem;display:none; v-bind:id='redOne' +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> <!--Pair et pair- -> <div class=diffPlaysTetx v-for=(item,index) dans eventDetail.Market v-if=item.RuleType==130> <span class=speciesName>Pair et impair</span> <span class=rotary v-if=item.State!=1>(Fermé)</span> <span class=speciesExp>Devinez les 90 minutes (y compris le temps d'arrêt) jeu Total de buts impairs et pairs</span> </div> <div id=oddeven v-for=(item,index) in eventDetail.Market v-if=item.RuleType==130 name=selectionItems class=oddeven> <div v-bind:class=[(select.BackOdds<1.01 || item.State!=1) 'oddevenitemGray commonBorderGray':'oddevenitem commonBorder'] v-for=(select,index ) dans item.Selection v-on:click=select.BackOdds>=1.01 &&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,'impair et pair',select.SelectionName) name=itemSelection> <p class=winEquLose v-bind:name='item'+ article .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+select.SelectionId v-bind:maxlimit=select.MaxStakeLimit>{{select.BackOdds}}</span> <img src=img/upIng.png style=width:0.2rem;display:none; v-bind:id='redOne' +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> <!--Objectifs totaux- - > <div class=diffPlaysTetx v-for=(item,index) dans eventDetail.Market v-if=item.RuleType==410> <span class=speciesName>Total de buts</span> <span class=rotary v-if=item.State!=1>(Fermé)</span> <span class=speciesExp>Devinez 90 minutes (temps d'arrêt compris) Le nombre total de buts dans le jeu</span> </div> <div id=totalGoals v-for=(item,index) in eventDetail.Market v-if=item.RuleType==410 name=selectionItems class=totalGoals> <div v-bind:class=[(select.BackOdds<1.01 || item.State!=1) 'totalGoalitemGray commonBorderGray':'totalGoalitem commonBorder'] v-for=(select,index ) dans 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+select.SelectionId v-bind:maxlimit=select.MaxStakeLimit>{{select.BackOdds}}</span> <img src=img/upIng.png style=width:0.2rem;display:none; v-bind:id='redOne' +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> <!--Partition complète- - > <div class=diffPlaysTetx v-for=(item,index) dans eventDetail.Market v-if=item.RuleType==140> <span class=speciesName>Score à temps plein</span> <span class=rotary v-if=item.State!=1>(Fermé)</span> <span class=speciesExp>Devinez 90 minutes (y compris le temps d'arrêt) Complet score</span> </div> <div id=correctScoreHome v-for=(item,index) dans eventDetail.Market v-if=item.RuleType==140 name=selectionItems class=correctScoreHomeAway> <div v-bind:class=[(select.BackOdds<1.01 || item.State!=1) ? 'correctScoreitemGray commonBorderGray':'correctScoreitem commonBorder'] v-for=(select,index) dans l'élément .Sélection v-on:click=select.BackOdds>=1.01 &&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,'full score',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+select.SelectionId v-bind:maxlimit=select.MaxStakeLimit>{{select.BackOdds}}</span> <img src=img/upIng.png style=width:0.2rem;display:none; v-bind:id='redOne' +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> <!--Objectif suivant--> <div class=diffPlaysTetx v-for=(item,index) dans eventDetail.Market v-if=item.RuleType==350> <span class=speciesName>Prochain objectif</span> <span class=rotary v-if=item.State != 1>(Fermé)</span> <span class=speciesExp>Devinez quelle équipe marquera le prochain but dans 90 minutes (temps additionnel compris)</span> </div> <div id=nextgoal v-for=(item,index) dans eventDetail.Market v-if=item.RuleType==350 name=selectionItems class=result> <div v-bind:class=[(select.BackOdds<1.01 || item.State !=1) ? 'resutitemGray commonBorderGray':'resutitem commonBorder'] v-for=(select,index) dans 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 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+select.SelectionId v-bind:maxlimit=select.MaxStakeLimit>{{select.BackOdds}}</span> <img src=img/upIng.png style=width:0.2rem;display:none; v-bind:id='redOne' +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 class= style=width: 100%;height :0.45rem;></div> </div> <div class=perchDiv style=width : 100%;height:3rem;></div> </div> </div> <!--Guess record--> <div class=downChangrTab GuessRecord> <div class=hide-body id=dialogorders> <div classe =tableNameGuess> <li>Comment jouer</li> <li>Options</li> <li>Cotes</li> <li>Bonus</li> <li>Résultats</li> </div> < ul style=background:#FFFFFF;height:4.79rem;overflow: scroll;> <div class=guessedLists id=contentOrders v-for=(item,index) dans les commandes> <li> {{item.MarketName}} </li > <li> {{item.SelectionName}} </li> <li> {{item.FillPrice}} </li> <li> {{item.FillAmount}} </li> <li> <p v-if=item.Status == '0'> En attente de confirmation</p> <p v-else-if=item.Status == '1 '>Commande OK</p> <p v-else-if=item.Status == '2'>{{item.NetReturn}}</p> <p v-else-if=item.Status == '3'>La commande a été annulée</p> <p v-else-if=item.Status == '4'>La commande n'est pas valide</p> <p v-else=item.Status = = '5 '>L'ordre a été rejeté, des événements importants se sont produits pendant la période de délai de pari, etc.</p> </li> </div> </ul> </div> </div> <!--Événement événements--> <div class =downChangrTab style=display: none; v-if=> <div class=login-body id=contentCases> <table class=whatHappen v-if=cases.length >0> <tr> <td></td> <td class=happenedMiddle> <classe div =happenedMiddle_top style=margin-top : 0.4rem;></div> </td> <td></td> </tr> </table> <table class=whatHappen style= v-for=(item,index) dans les cas border=0 cellpacing=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> </table> <table 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> </table> <!--<div style=largeur : 100 % ; hauteur : 2,7rem;></div>--> </div> </div> <!--Statistiques techniques--> <div class=downChangrTab style=display: none;> < div class=skillInfoGaryBg id=stutsskillsData> <div class=skillInfo v-for=(item, index) in 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> <!--Ordre du bas--> <div class=buttomOrder> <!--Entrée du montant - -> <!--Montant du pari--> <div class=aboutMoney> <input type=text name= id=betmoney class=gussMoney value=Montant du pari placeholder= readonly=readonly v-model=gussMoney /> <img src=img/clearBetMoney.png class=clearGussMoney id=clearGussMoney /> <!--Balance--> <span class=balanceMoney id=minemoney>Mon solde : 888</span> <!--Montant du pari -- > <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=line-height: 0.5rem;> <p style=height: 0.3rem;>Tous <span style=margin-left: 0.05rem;>in</span></p> <p id=allinvalue style=height: 0.3rem;>100</p> </li> </ p> ul> </div> <!--OK--> <p class=subSure subSureRed style=text-align:center onclick=CreateOrder(); id=subSure> OK</p> </div> </div> <!--Couche de masque après une commande réussie--> <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> <script src=js/jquery-1.10.2.min.js type=text/javascript charset=utf-8></script> <script src=js/vue.min.js type=text/javascript charset=utf-8></script> <script src=js/common.js?ver=012902 type=text/javascript charset=utf-8></script> <script src=js/jquery.cookie.min.js></script> <script src=js/mask.js?ver=012901></script> <script type= text/javascript src=js/eventDetailsNew.js?ver=012908></script> <script src=../js/animation.js></script></body></html> RésumerCe qui précède est la solution parfaite au flou d'image HTML5 Canvas introduite par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !