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 > < div class="tipMask" > < div class="tipBox" > < img src="img/faileTip.png" class="tipsImg" / > < div class="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 > < !--标题-- > < 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" 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;height:0.45rem;" id="closesuccess" onclick="closesuccess();" / > < /div > < div class="teamname" > < 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" >AWAY< /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%;" >玩法< /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 > < /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 class="teamwinmoneybottom" style="width: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 class="downChangrTab quizGames" style="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.State!=1" >(已封盘)< /span > < span class="speciesExp" >猜90分钟(含补时)两队的比赛结果< /span > < /div > < div v-for="(item,index) in eventDetail.Market" v-if="item.RuleType==100" id="result" name="selectionItems" class="result" > < 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,'赛果',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 > < /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" class="oddeven" > < div 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 > < /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" class="totalGoals" > < div 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 > < /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="correctScoreHome" v-for="(item,index) in 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) 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 > < /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" class="result" > < 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,'下一进球',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 > < !--竞猜记录-- > < div class="downChangrTab guessRecord" > < div class="hide-body" id="dialogorders" > < div class="tableNameGuess" > < li >玩法< /li > < li >选项< /li > < li >赔率< /li > < li >本金< /li > < li >结果< /li > < /div > < ul style="background:#FFFFFF;height:4.79rem;overflow: scroll;" > < div 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 > < /div > < /ul > < /div > < /div > < !--赛事事件-- > < 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="happenedMiddle_top" style="margin-top: 0.4rem;" >< /div > < /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" > < div class="happenedMiddle_line" >< /div > < /td > < td >< /td > < /tr > < tr v-if="item.CaseDescription.indexOf('主') >-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('主')< 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" > < 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 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 > < !--底部下单-- > < 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" / > < !--余额-- > < span class="balanceMoney" id="minemoney" >我的余额：888< /span > < !--下注金额-- > < 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;" >All < span style="margin-left: 0.05rem;" >in< /span >< /p > < p id="allinvalue" style="height: 0.3rem;" >100< /p > < /li > < /ul > < /div > < !--确定-- > < 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图像模糊完美解决办法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！
注：相关教程知识阅读请移步到HTML教程频道。