1. Recientemente estuve usando lienzo h5 para dibujar animaciones y descubrí que las imágenes estaban particularmente borrosas. Más tarde, finalmente descubrí que el culpable era el código <meta name=viewport content=width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no />, debido a esta línea el código está escalado
2. El efecto de imágenes borrosas:
3. El efecto después de quitar la compresión.
El código se puede cambiar a
<!DOCTYPE html><html><head> <meta charset=utf-8 /> <meta name=viewport content=user-scalable=no /> <title>Página de detalles del evento</title> <script src=js/ rem.js type=text/javascript charset=utf-8></script> <enlace rel=hoja de estilo type=text/css href=css/m_reset.css /> <enlace rel=hoja de estilo tipo=text/css href=css/gameListsNew.css /> <link href=css/mask.css rel=hoja de estilo /></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>Inténtalo de nuevo</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> <!--Aún no iniciado--> <!--<p class=theWorldCup>Copa del Mundo</p>--> <p class=theGameNowDataTime>{{eventDetail.TimeFormat }}</p> <p class=gameBeginTime>{{getScoreOrVs(eventDetail.HomeTeamScore, eventDetail .AwayTeamScore)}}</p> </div> <!--Duración inicial--> <!--<div> <p>73:40</p> </div>--> </div> <div class=titlevs> <img class=teamFlagLogo onerror=nofind(this);src='img/teamlogonew/'+eventDetail .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; altura:0.45rem; id=closesuccess onclick=closesuccess(); /> </div> <div clase=nombre del equipo> <div class=teamnameitem><p class=teamnameitemtop>{{eventDetail.HomeTeamName}}</p><br /><p class=teamnameitembottom>INICIO</p></div> <div class=teamnameitem ><p class=nombredelequipoitemiddle>VS</p></div> <div class=nombredelequipoitem><p class=teamnameitemtop>{{eventDetail.AwayTeamName}}</p><br /><p class=teamnameitembottom>AWAY</p></div> </div> <div class=teamdetail> <div class=teamdate><span>{{eventDetail.CompetitionName}}</span><span>/</span><span>{{eventDetail.DateFormat}}</span></div> <div class=teamplaysselection> <estilo de tabla=ancho:100%;text-align:left;alto:100%;> <tr> <td class=teamplaysselectiontop style=width:50%;>Cómo jugar</td> <td class=teamplaysselectiontop style=width:50%;>Opciones</td> </tr> <tr> <td class=teamplaysselectionbottom style=width:50 %; id=rulename>Probabilidades de partido</td> <td class=teamplaysselectionbottom style=width:50%; id=selectionname>Inicio</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%;> Cuotas</td> <td class=teamwinmoneytop style=width:50%;> Pre-ganancia</td> </tr> <tr> <td class=teamwinmoneybottom style=width:50%; id=betmoneysuc>1000</td> <td clase =teamwinmoneybottom estilo=ancho:50%; id=betodds>12.54</td> <td class=teamwinmoneybottom estilo=ancho:50%; id=betwin>12540</td> </tr> </table> </div> </div> </div> </div> <div> <div class= cuadrado id=cuadrado> <canvas id=courtCaseNew ancho=980 alto=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>Campo de apuestas</p> </div> <div class=middleitem id=jcjl> <p class=tabCommon>Récord de apuestas</p> </div> <div class=middleitem id=sssj> <p class=tabCommon>Eventos</p> </div> <div class=middleitem id=jstj> <p class=tabCommon>Estadísticas técnicas</p> </div> </div div> <div class=downChangrTab quizGames style=display: block;> <div id=ruleTypeItems v-cloak> <!--ganar, empatar, perder--> <div class=diffPlaysTetx v-for=(item,index) in eventDetail.Market v-if=item.RuleType==100> <span class=speciesName>Resultados</span> <span class=rotary v-if=item State. !=1>(Cerrado)</span> <span class=speciesExp>Adivina el resultado de los dos equipos en 90 minutos (incluido el tiempo adicional)</span> </div> <div v-for=(item,index) in eventDetail.Market v-if=item.RuleType==100 id=resultado nombre=selectionItems class=resultado> <div v-bind:class=[(select.BackOdds<1.01 || item.State!=1) ? 'resuitemGray commonBorderGray':'resuitem commonBorder'] v-for=(select,index) en item.Selection v-on:click=select.BackOdds>=1.01 &&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,'Result', select.SelectionName); nombre=elementoSelección> <p clase=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; +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> <!--Pares e impares- - > <div class=diffPlaysTetx v-for=(item,index) en eventDetail.Market v-if=item.RuleType==130> <span class=speciesName>Pares e impares</span> <span class=rotary v-if=item.State!=1>(Cerrado)</span> <span class=speciesExp>Adivina los 90 minutos (incluido el tiempo de parada) juego Total de goles pares e impares</span> </div> <div id=oddeven v-for=(item,index) in eventDetail.Market v-if=item.RuleType==130 nombre=selectionItems class=oddeven> <div v-bind:class=[(select.BackOdds<1.01 || item.State!=1) ? 'oddevenitemGray commonBorderGray':'oddevenitem commonBorder'] v-for=(select,index ) en item.Selection v-on:click=select.BackOdds>=1.01 &&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,'par e impar',select.SelectionName) nombre=itemSelection> <p class=winEquLose v-bind:name='item'+ artículo .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> <!--Metas totales- - > <div class=diffPlaysTetx v-for=(item,index) in eventDetail.Market v-if=item.RuleType==410> <span class=speciesName>Total de goles</span> <span class=rotary v-if=item.State!=1>(Cerrado)</span> <span class=speciesExp>Supongo que 90 minutos (incluido el tiempo de descuento) El número total de goles en el juego</span> </div> <div id=totalGoals v-for=(item,index) in eventDetail.Market v-if=item.RuleType==410 nombre=selectionItems class=totalGoals> <div v-bind:class=[(select.BackOdds<1.01 || item.State!=1) ? 'totalGoalitemGray commonBorderGray':'totalGoalitem commonBorder'] v-for=(select,index ) en item.Selection v-on:click=select.BackOdds>=1.01 &&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,'Total Goals',select.SelectionName) nombre=itemSelection> <p class=winEquLose v-bind:name='item'+ elemento .Id de mercado 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> <!--Puntuación completa- - > <div class=diffPlaysTetx v-for=(item,index) in eventDetail.Market v-if=item.RuleType==140> <span class=speciesName>Puntuación de tiempo completo</span> <span class=rotary v-if=item.State!=1>(Cerrado)</span> <span class=speciesExp>Adivina 90 minutos (incluido el tiempo de descuento) Completo puntuación</span> </div> <div id=correctScoreHome v-for=(item,index) en eventDetail.Market v-if=item.RuleType==140 nombre=selectionItems class=correctScoreHomeAway> <div v-bind:class=[(select.BackOdds<1.01 || item.State!=1) ? 'correctScoreitemGray commonBorderGray':'correctScoreitem commonBorder'] v-for=(select,index) en el elemento .Selección v-on:click=select.BackOdds>=1.01 &&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,'puntuación completa',select.SelectionName) nombre=itemSelection> <p class=winEquLose v-bind:name='item'+ elemento .Id de mercado 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 estilo=ancho: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> <!--Siguiente objetivo--> <div class=diffPlaysTetx v-for=(item,index) en eventDetail.Market v-if=item.RuleType==350> <span class=speciesName>Siguiente objetivo</span> <span class=rotary v-if=item.State!= 1>(Cerrado)</span> <span class=speciesExp>Adivina el equipo que marcará el próximo gol en 90 minutos (incluido el tiempo de descuento)</span> </div> <div id=nextgoal v-for=(item,index) in 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) en item.Selection v-on:click=select.BackOdds>=1.01 &&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,'Siguiente objetivo',select.SelectionName) nombre=itemSelection > < p clase=winEquLose v-bind:nombre='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 estilo=ancho:0.2rem;display:none; v-bind:id='greenOne'+item.MarketId+select.SelectionId /> </p> </div> <div class= estilo=ancho: 100%;alto :0.45rem;></div> </div> <div clase=perchDiv estilo=ancho: 100%;height:3rem;></div> </div> </div> <!--Guess record--> <div class=downChangrTab SupongoRecord> <div class=hide-body id=dialogorders> <div class =tableNameGuess> <li>Cómo jugar</li> <li>Opciones</li> <li>Probabilidades</li> <li>Bonificación</li> <li>Resultados</li> </div> < ul estilo=fondo:#FFFFFF;altura:4.79rem;desbordamiento: desplazamiento;> <div class=guessedLists id=contentOrders v-for=(item,index) en pedidos> <li> {{item.MarketName}} </li > <li> {{item.SelectionName}} </li> <li> {{item.FillPrice}} </li> <li> {{item.FillAmount}} </li> <li> <p v-if=item.Status == '0'> Pendiente de confirmación</p> <p v-else-if=item.Status == '1 '>Pedido OK</p> <p v-else-if=item.Status == '2'>{{item.NetReturn}}</p> <p v-else-if=item.Status == '3'>El pedido ha sido cancelado</p> <p v-else-if=item.Status == '4'>El pedido no es válido</p> <p v-else=item.Status = = '5 '>La orden fue rechazada, ocurrieron eventos importantes durante el período de retraso de apuestas, etc.</p> </li> </div> </ul> </div> </div> <!--Event eventos--> <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> <div class =sucedióMiddle_top style=margin-top: 0.4rem;></div> </td> <td></td> </tr> </table> <table class=whatHappen estilo = v-for = (elemento, índice) en casos borde = 0 espacio entre celdas = 0 relleno de celdas = 0> <tr> <td></td> <td class=happenedMiddle> <div class=happenedMiddle_line></div> < /td> <td></td> </tr> <tr v-if=item.CaseDescription.indexOf('principal')>-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 clase=sucedióMiddle> <div clase=eventosHappend_img> <img :src=GetMatchEventImg(item.CaseDescription) /> </div> </td> <td></td> </tr> <tr v-if=item.CaseDescription.indexOf('客')>- 1> <td></td> <td class=sucedióMiddle> <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 estilo=ancho: 100%; alto: 2.7rem;></div>--> </div> </div> <!--Estadísticas técnicas--> <div class=downChangrTab style=display: none;> < div class=skillInfoGaryBg id=stutsskillsData> <div class=skillInfo v-for=(elemento, índice) en 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 clase=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> <!--Pedido inferior--> <div class=buttomOrder> <!--Ingreso de importe - -> <!--Cantidad de apuesta--> <div class=aboutMoney> <tipo de entrada=nombre de texto= id=betmoney class=gussMoney valor=Cantidad de apuesta marcador de posición= solo lectura=solo lectura v-model=gussMoney /> <img src=img/clearBetMoney.png class=clearGussMoney id=clearGussMoney /> <!--Balance--> <span class=balanceMoney id=minemoney>Mi saldo: 888</span> <!--Monto de la apuesta -- > <div clase=diffGussMoney estilo=text-align:center;> <ul> <li nombre=bettingmoney clase=difGuMonCom val=100>+100</li> <li nombre=dinero de apuestas clase=difGuMonCom val=500>+500</li> <li nombre=dinero de apuestas clase=difGuMonCom val=1000>+1000</li> <li clase= difGuMonCom id=allin estilo=altura-línea: 0.5rem;> <p estilo=altura: 0.3rem;>Todos <span style=margin-left: 0.05rem;>en</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> <!--Capa de máscara después de realizar el pedido correctamente--> <div id=overlay class=overlay></div> </div> <div > < img src=img/goal/goalball.png /> <img src=img/goal/goal.png /> <img src=img/goal/fuegos artificiales.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> <tipo de script= text/javascript src=js/eventDetailsNew.js?ver=012908></script> <script src=../js/animation.js></script></body></html> ResumirLo anterior es la solución perfecta para el desenfoque de imágenes de Canvas HTML5 introducida por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!