1. 최근 h5 캔버스를 사용하여 애니메이션을 그리는데 이미지가 특히 흐릿한 것을 발견했습니다. 나중에 마침내 범인이 <meta name=viewport content=width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no /> 코드라는 것을 발견했습니다. 이 줄 때문에 코드의 크기가 조정됩니다.
2. 이미지 흐림 효과:
3. 압축 제거 후 효과
코드는 다음과 같이 변경될 수 있습니다.
<!DOCTYPE html><html><head> <meta charset=utf-8 /> <meta name=viewport content=user-scalable=no /> <title>이벤트 세부정보 페이지</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 클래스=tipsImg /> <div 클래스=fileBtn> <img src=img/fileBtn.png /> <span class=tryAgain>다시 시도</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> <!--아직 시작되지 않음--> <!--<p class=theWorldCup>월드컵</p>--> <p class=theGameNowDataTime>{{eventDetail.TimeFormat }}</p> <p class=gameBeginTime>{{getScoreOrVs(eventDetail.HomeTeamScore, eventDetail .AwayTeamScore)}}</p> </div> <!--시작 시간--> <!--<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 클래스=ordersuccess> <div style=text-align:right;padding-top:0.2rem;padding-left:0.2rem;> <img src=img/ordersuccess/close.png style=width:0.45rem; 높이:0.45rem; id=closesuccess onclick=closesuccess() /> </div> <div class=teamname> <div class=teamnameitem><p class=teamnameitemtop>{{eventDetail.HomeTeamName}}</p><br /><p class=teamnameitembottom>홈</p></div> <div class=teamnameitem ><p class=teamnameitemmiddle>VS</p></div> <div class=teamnameitem><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> <테이블 스타일=너비:100%;텍스트 정렬:왼쪽;높이:100%;> <tr> <td 클래스=teamplayselectiontop style=width:50%;>플레이 방법</td> <td class=teamplaysselectiontop style=width:50%;>옵션</td> </tr> <tr> <td class=teamplaysselectionbottom style=width:50 %; id=rulename>경기 확률</td> <td class=teamplaysselectionbottom style=width:50%; id=selectionname>홈</td> </tr> </table> </div> <div class=teamwinmoney> <table style=width:90%;text-align:left;height:100%;> <tr > <td class=teamwinmoneytop style=width:50%;> 원금</td> <td class=teamwinmoneytop style=width:50%;> 승률</td> <td class=teamwinmoneytop style=width:50%;> 사전 승리</td> </tr> <tr> <td class=teamwinmoneybottom style=width:50%; id=betmoneysuc>1000</td> <td 클래스 =teamwinmoneybottom 스타일=너비:50% id=betodds>12.54</td> <td class=teamwinmoneybottom style=width: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>베팅 필드</p> </div> <div class=middleitem id=jcjl> <p class=tabCommon>베팅 기록</p> </div> <div class=middleitem id=sssj> <p class=tabCommon>이벤트</p> </div> <div class=middleitem id=jstj> <p class=tabCommon>기술 통계</p> </div> </div div> <div class=downChangrTab 퀴즈게임 스타일=display: block;> <div id=ruleTypeItems v-cloak> <!--승, 무승부, 패--> <div class=diffPlaysTetx v-for=(item,index) in eventDetail.Market v-if=item.RuleType==100> <span class=speciesName>결과</span> <span class=rotary v-if=item. !=1>(종료)</span> <span class=speciesExp>90분(중지 시간 포함) 동안 두 팀의 결과를 맞춰보세요</span> </div> <div v-for=(item,index) in eventDetail.Market v-if=item.RuleType==100 id=결과 이름=selectionItems 클래스=결과> <div v-bind:class=[(select.BackOdds<1.01 || item.State!=1) ? 'resuitemGray commonBorderGray':'resuitem commonBorder'] v-for=(select,index) in item.Selection v-on:click=select.BackOdds>=1.01 &&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,'Result' , select.SelectionName); 이름=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' +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=diffPlaysTetx v-for=(item,index) in eventDetail.Market v-if=item.RuleType==130> <span class=speciesName>홀짝수</span> <span class=rotary v-if=item.State!=1>(닫음)</span> <span class=speciesExp>90분(정지 시간 포함)을 추측해 보세요. 게임 총 목표 홀수 및 짝수</span> </div> <div id=oddeven v-for=(item,index) in eventDetail.Market v-if=item.RuleType==130 name=selectionItems 클래스=oddeven> <div v-bind:class=[(select.BackOdds<1.01 || item.State!=1) ? 'oddevenitemGray commonBorderGray':'oddevenitem commonBorder'] v-for=(select,index ) item.Selection v-on:click=select.BackOdds>=1.01 &&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,'홀수 및 짝수',select.SelectionName) name=itemSelection> <p class=winEquLose v-bind:name='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' +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=diffPlaysTetx v-for=(item,index) in eventDetail.Market v-if=item.RuleType==410> <span class=speciesName>총 득점</span> <span class=rotary v-if=item.State!=1>(종료)</span> <span class=speciesExp>90분 추측(중지 시간 포함) 총 득점 게임 내 골 수</span> </div> <div id=totalGoals v-for=(item,index) in eventDetail.Market v-if=item.RuleType==410 name=selectionItems 클래스=totalGoals> <div v-bind:class=[(select.BackOdds<1.01 || item.State!=1) ? 'totalGoalitemGray commonBorderGray':'totalGoalitem commonBorder'] v-for=(select,index ) item.Selection v-on:click=select.BackOdds>=1.01 &&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,'총 목표',select.SelectionName) name=itemSelection> <p class=winEquLose v-bind:name='item'+ item .시장 ID 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' +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=diffPlaysTetx v-for=(item,index) in eventDetail.Market v-if=item.RuleType==140> <span class=speciesName>풀타임 점수</span> <span class=rotary v-if=item.State!=1>(종료)</span> <span class=speciesExp>90분 추측(중지 시간 포함) 풀타임 점수</span> </div> <div id=corractScoreHome v-for=(item,index) in eventDetail.Market v-if=item.RuleType==140 name=selectionItems class=corrightScoreHomeAway> <div v-bind:class=[(select.BackOdds<1.01 || item.State!=1) ? 'corrightScoreitemGray commonBorderGray':'corrightScoreitem commonBorder'] v-for=(select,index) 항목 .선택 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'+ 항목 .시장 ID 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' +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> <!--다음 목표--> <div class=diffPlaysTetx v-for=(item,index) in eventDetail.Market v-if=item.RuleType==350> <span class=speciesName>다음 목표</span> <span class=rotary v-if=item.State != 1>(종료)</span> <span class=speciesExp>90분(중단 시간 포함) 후에 다음 골을 넣을 팀을 맞춰보세요</span> </div> <div id=nextgoal v-for=(item,index) in eventDetail.Market v-if=item.RuleType==350 name=selectionItems 클래스=결과> <div v-bind:class=[(select.BackOdds<1.01 || item.State !=1) ? 'resutitemGray commonBorderGray':'resutitem commonBorder'] v-for=(select,index) in 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 클래스=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' +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= 스타일=너비: 100%;높이 :0.45rem;></div> </div> <div class=perchDiv 스타일=너비: 100%;height:3rem;></div> </div> </div> <!--추측 기록--> <div class=downChangrTab 추측 기록> <div class=hide-body id=dialogorders> <div 클래스 =tableNameGuess> <li>게임 방법</li> <li>옵션</li> <li>승률</li> <li>보너스</li> <li>결과</li> </div> < 울 스타일=배경:#FFFFFF;높이:4.79rem;오버플로: 스크롤;> <div class=guessedLists id=contentOrders v-for=(item,index) 주문 내역> <li> {{item.MarketName}} </li > <li> {{item.SelectionName}} </li> <li> {{item.FillPrice}} </li> <li> {{item.FillAmount}} </li> <li> <p v-if=item.Status == '0'> 확인 보류</p> <p v-else-if=item.Status == '1 '>주문 확인</p> <p v-else-if=item.Status == '2'>{{item.NetReturn}}</p> <p v-else-if=item.Status == '3'>주문이 취소되었습니다</p> <p v-else-if=item.Status == '4'>주문이 잘못되었습니다</p> <p v-else=item.Status = = '5 '>주문이 거부되었거나 배팅 지연 기간 동안 중요한 이벤트가 발생했습니다.</p> </li> </div> </ul> </div> </div> <!--이벤트 이벤트--> <div 클래스 =downChangrTab 스타일=표시: 없음; v-if=> <div class=login-body id=contentCases> <table class=whatHappen v-if=cases.length >0> <tr> <td></td> <td class=happenedMiddle> <div 클래스 =happenedMiddle_top style=margin-top: 0.4rem;></div> </td> <td></td> </tr> </table> <table class=whatHappen style= v-for=(item,index) 경우 border=0cellspacing=0cellpadding=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=width: 100%; height: 2.7rem;></div>--> </div> </div> <!--기술 통계--> <div class=downChangrTab style=display: none;> < div class=skillInfoGaryBg id=stutsskillsData> <div class=skillInfo v-for=(item, index) in SkillData> <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 클래스=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> <!--하위 순서--> <div class=buttomOrder> <!--금액 입력 - -> <!--베팅 금액--> <div class=aboutMoney> <input type=text name= id=betmoney class=gussMoney value=베팅 금액 placeholder= readonly=readonly v-model=gussMoney /> <img src=img/clearBetMoney.png class=clearGussMoney id=clearGussMoney /> <!--Balance--> <span class=balanceMoney id=minemoney>내 잔액: 888</span> <!--베팅 금액 -- > <div class=diffGussMoney 스타일=text-align:center;> <ul> <li name=bettingmoney 클래스=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 스타일=줄 높이: 0.5rem;> <p 스타일=높이: 0.3rem;>모두 <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> 확인</p> </div> </div> <!--성공적인 주문 후 레이어 마스크--> <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> 요약위 내용은 에디터가 소개한 HTML5 Canvas 이미지 블러에 대한 완벽한 솔루션입니다. 궁금한 사항이 있으면 메시지를 남겨주시면 에디터가 제 시간에 답변해 드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!