1、最近在用h5的canvas画动画,发现图像特别模糊。后来终于找到罪魁祸首是
<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> <p class=tipMask> <p class=tipBox> <img src=img/faileTip.png class=tipsImg /> <p class=fileBtn> <img src=img/fileBtn.png /> <span class=tryAgain>再试一次</span> </p> </p> </p> <p> <img src=img/whiteBack.png class=titleImg /> <p class=bgEvent id=contentbody> <p id=eventDetail v-cloak> <!--标题--> <p class=detailevent> <p class=titlevs> <img class=teamFlagLogo onerror=nofind(this); :src='img/teamlogonew/'+eventDetail.HomeTeamID+'.png' /> <p class=countryName> {{eventDetail.HomeTeamName}} </p> </p> <p class=titlevs style=padding-top:0.3rem ;> <p> <!--未开赛--> <!--<p class=theWorldCup>世界杯</p>--> <p class=theGameNowDataTime>{{eventDetail.TimeFormat }}</p> <p class=gameBeginTime>{{getScoreOrVs(eventDetail.HomeTeamScore,eventDetail.AwayTeamScore)}}</p> </p> <!--开赛时长--> <!--<p> <p>73:40</p> </p>--> </p> <p class=titlevs> <img class=teamFlagLogo onerror=nofind(this); :src='img/teamlogonew/'+eventDetail.AwayTeamID+'.png' /> <p class=countryName> {{eventDetail.AwayTeamName}} </p> </p> </p> <p id=ordersuccess class=ordersuccess> <p style=text-align:right;padding-top:0.2rem;padding-left:0.2rem;> <img src=img/ordersuccess/close.png style=width:0.45rem;height:0.45rem; id=closesuccess onclick=closesuccess(); /> </p> <p class=teamname> <p class=teamnameitem><p class=teamnameitemtop>{{eventDetail.HomeTeamName}}</p><br /><p class=teamnameitembottom>HOME</p></p> <p class=teamnameitem ><p class=teamnameitemmiddle>VS</p></p> <p class=teamnameitem><p class=teamnameitemtop>{{eventDetail.AwayTeamName}}</p><br /><p class=teamnameitembottom>AWAY</p></p> </p> <p class=teamdetail> <p class=teamdate><span>{{eventDetail.CompetitionName}}</span><span>/</span><span>{{eventDetail.DateFormat}}</span></p> <p class=teamplaysselection> <table style=width:100%;text-align:left;height:100%;> <tr> <td class=teamplaysselectiontop style=width:50%;>玩法</td> <td class=teamplaysselectiontop style=width:50%;>选项</td> </tr> <tr> <td class=teamplaysselectionbottom style=width:50%; id=rulename>Match Odds</td> <td class=teamplaysselectionbottom style=width:50%; id=selectionname>Home</td> </tr> </table> </p> <p 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 class=teamwinmoneybottom style=width:50%; id=betodds>12.54</td> <td class=teamwinmoneybottom style=width:50%; id=betwin>12540</td> </tr> </table> </p> </p> </p> </p> <p> <p class=square id=square> <canvas id=courtCaseNew width=980 height=765></canvas> </p> <img src=img/balllittle.png style=width:20px;height:20px;display:none; id=imgballNew /> </p> <p class=middlechat> <p class=middleitem id=jcc> <p class=tabActive>竞猜场</p> </p> <p class=middleitem id=jcjl> <p class=tabCommon>竞猜记录</p> </p> <p class=middleitem id=sssj> <p class=tabCommon>赛事事件</p> </p> <p class=middleitem id=jstj> <p class=tabCommon>技术统计</p> </p> </p> <p class=downChangrTab quizGames style=display: block;> <p id=ruleTypeItems v-cloak> <!--胜平负--> <p class=diffPlaysTetx v-for=(item,index) in eventDetail.Market v-if=item.RuleType==100> <span class=speciesName>赛果</span> <span class=rotary v-if=item.State!=1>(已封盘)</span> <span class=speciesExp>猜90分钟(含补时)两队的比赛结果</span> </p> <p v-for=(item,index) in eventDetail.Market v-if=item.RuleType==100 id=result name=selectionItems class=result> <p 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,'赛果',select.SelectionName); name=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> </p> </p> <!--单双--> <p 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> </p> <p id=oddeven v-for=(item,index) in eventDetail.Market v-if=item.RuleType==130 name=selectionItems class=oddeven> <p v-bind:class=[(select.BackOdds<1.01 || item.State!=1) ? 'oddevenitemGray commonBorderGray':'oddevenitem 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,'单双',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> </p> </p> <!--总进球--> <p 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> </p> <p id=totalGoals v-for=(item,index) in eventDetail.Market v-if=item.RuleType==410 name=selectionItems class=totalGoals> <p v-bind:class=[(select.BackOdds<1.01 || item.State!=1) ? 'totalGoalitemGray commonBorderGray':'totalGoalitem 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,'总进球',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> </p> </p> <!--全场比分--> <p 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> </p> <p id=correctScoreHome v-for=(item,index) in eventDetail.Market v-if=item.RuleType==140 name=selectionItems class=correctScoreHomeAway> <p v-bind:class=[(select.BackOdds<1.01 || item.State!=1) ? 'correctScoreitemGray commonBorderGray':'correctScoreitem 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,'全场比分',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> </p> </p> <p class=downImg onclick=clickImg()> <img src=img/toDown.png /> </p> <!--下一进球--> <p 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> </p> <p id=nextgoal v-for=(item,index) in eventDetail.Market v-if=item.RuleType==350 name=selectionItems class=result> <p 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,'下一进球',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> </p> <p class= style=width: 100%;height:0.45rem;></p> </p> <p class=perchp style=width: 100%;height:3rem;></p> </p> </p> <!--竞猜记录--> <p class=downChangrTab guessRecord> <p class=hide-body id=dialogorders> <p class=tableNameGuess> <li>玩法</li> <li>选项</li> <li>赔率</li> <li>本金</li> <li>结果</li> </p> <ul style=background:#FFFFFF;height:4.79rem;overflow: scroll;> <p class=guessedLists id=contentOrders v-for=(item,index) in orders> <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> </p> </ul> </p> </p> <!--赛事事件--> <p class=downChangrTab style=display: none; v-if=> <p class=login-body id=contentCases> <table class=whatHappen v-if=cases.length >0> <tr> <td></td> <td class=happenedMiddle> <p class=happenedMiddle_top style=margin-top: 0.4rem;></p> </td> <td></td> </tr> </table> <table class=whatHappen style= v-for=(item,index) in cases border=0 cellspacing=0 cellpadding=0> <tr> <td></td> <td class=happenedMiddle> <p class=happenedMiddle_line></p> </td> <td></td> </tr> <tr v-if=item.CaseDescription.indexOf('主')>-1> <td class=eventsHappendLeft_things> <p class=eventsText> <p class=eventsTextLeft_time>{{item.CaseMinutes}}'</p> <p class=eventsTextLeft_Country>{{item.CaseDescription}}</p> </p> </td> <td class=happenedMiddle> <p class=eventsHappend_img> <img :src=GetMatchEventImg(item.CaseDescription) /> </p> </td> <td></td> </tr> <tr v-if=item.CaseDescription.indexOf('客')>-1> <td></td> <td class=happenedMiddle> <p class=eventsHappend_img> <img :src=GetMatchEventImg(item.CaseDescription) /> </p> </td> <td class=eventsHappendRight_things> <p class=eventsText> <p class=eventsTextRight_Country>{{item.CaseDescription}}</p> <p class=eventsTextRight_time>{{item.CaseMinutes}}'</p> </p> </td> </tr> <tr v-if=item.CaseDescription.indexOf('主')<0 && item.CaseDescription.indexOf('主')<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> <p class=happenedMiddle_line></p> <p class=happenedMiddle_top></p> </td> <td></td> </tr> </table> <!--<p style=width: 100%; height: 2.7rem;></p>--> </p> </p> <!--技术统计--> <p class=downChangrTab style=display: none;> <p class=skillInfoGaryBg id=stutsskillsData> <p class=skillInfo v-for=(item, index) in skillsData> <li class=shotsOnTargets> <p class=shotsOnTargets_left> <p class=skillsTextFonts>{{item.AwayTeamValue}}</p> <p class=sotl_bg> <p class=sotl_bgProgress></p> </p> </p> <p class=shotsOnTargets_middle> <img :src=GetMatchStatsImage(item.StatsType) /> <p class=shills_name>{{item.StatsType}}</p> </p> <p class=shotsOnTargets_right> <p class=skillsTextFonts>{{item.HomeTeamValue}}</p> <p class=sotl_bg> <p class=sotl_bgProgress></p> </p> </p> </li> </p> </p> </p> </p> <!--底部下单--> <p class=buttomOrder> <!--金额输入--> <!--竞猜金额--> <p 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 /> <!--余额--> <span class=balanceMoney id=minemoney>我的余额:888</span> <!--下注金额--> <p 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;>All <span style=margin-left: 0.05rem;>in</span></p> <p id=allinvalue style=height: 0.3rem;>100</p> </li> </ul> </p> <!--确定--> <p class=subSure subSureRed style=text-align:center; onclick=CreateOrder(); id=subSure> 确定 </p> </p> </p> <!--下单成功后遮罩层--> <p id=overlay class=overlay></p> </p> <p> <img src=img/goal/goalball.png /> <img src=img/goal/goal.png /> <img src=img/goal/fireworks.png /> </p> <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>
相关推荐:
JavaScript实现的图像模糊算法代码分享_javascript技巧
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。