1、最近在用h5的canvas画动画，发现图像特别模糊。后来终于找到罪魁祸首是<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,ur-scalable=no” />这个代码，因为这行代码进行了伸缩
2、模糊图像的效果：
3、将压缩去掉后的效果
可以将代码改成
<!doctype html><html><head><meta chart="utf-8" /><meta name="viewport" content="ur-scalable=no" /><title>赛事详细页</title><script src="js/rem.js" type="text/javascript" chart="utf-8"></script><link rel="stylesheet" type="text/css" href="css/m_ret.css" /><link rel="stylesheet" type="text/css" href="css/gamelistsnew.css" /><link href="css/mask.css" rel="stylesheet" /></head><bodytold><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/clo.png" style="width:0.45rem;height:0.45rem;" id="closuccess" onclick="closuccess();" /></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="teamplayslection"><table style="width:100%;text-align:left;height:100%;"><tr><td class="teamplayslectiontop" style="width:50%;">玩法</td><td class="teamplayslectiontop" style="width:50%;">选项</td></tr><tr><td class="teamplayslectionbottom" style="width:50%;" id="rulename">match odds</td><td class="teamplayslectionbottom" style="width:50%;" id="lectionname">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="courtcanew" 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="speciexp">猜90分钟(含补时)两队的比赛结果</span></div><div v-for="(item,index) in eventdetail.market" v-if="item.ruletype==100" id="result" name="lectionitems" class="result"><div v-bind:class="[(lect.backodds<1.01 || item.state!=1) ? 'resutitemgray commonbordergray':'resutitem co什么是数字媒体mmonborder']" v-for="(lect,index) in item.lection"v-on:click="lect.backodds>=1.01 &&clickfun($event,item.state,lect.backodds,item.marketid,lect.lectionid,'赛果',lect.lectionname);" name="itemlection"><p class="winequlo" v-bind:name="'item'+item.marketid">{{lect.lectionname}}</p><p class="winequloodds " v-bind:name="'item'+item.marketid"><span v-bind:id="item.marketid+lect.lectionid" v-bind:maxlimit="lect.maxstakelimit">{{lect.backodds}}</span><img src="img/uping.png" style="width:0.2rem;display:none;" v-bind:id="'redone'+item.marketid+lect.lectionid" /><img src="img/downing.png" style="width:0.2rem;display:none;" v-bind:id="'greenone'+item.marketid+lect.lectionid" /></p></div></div><!--单双--><div class="diffplaystetx" v-for="(item,index) in eventdetail.market" v-if="item.ruletype==130"><span class="speciesname">单双&l蟒蛇大战鳄鱼t;/span><span class="rotary" v-if="item.state!=1">(已封盘)</span><span class="speciexp">猜90分钟(含补时)比赛总进球的单双</span></div><div id="oddeven" v-for="(item,index) in eventdetail.market" v-if="item.ruletype==130" name="lectionitems" class="oddeven"><div v-bind:class="[(lect.backodds<1.01 || item.state!=1) ? 'oddevenitemgray commonbordergray':'oddevenitem commonborder']" v-for="(lect,index) in item.lection" v-on:click="lect.backodds>=1.01 &&clickfun($event,item.state,lect.backodds,item.marketid,lect.lectionid,'单双',lect.lectionname)" name="itemlection"><p class="winequlo" v-bind:name="'item'+item.marketid" v-bind:id="'lectionname'+item.marketid+lect.lectionid">{{lect.lectionname}}</p><p class="winequloodds" v-bind:name="'item'+item.marketid"><span v-bind:id="item.marketid+lect.lectionid" v-bind:maxlimit="lect.maxstakelimit">{{lect.backodds}}</span><img src="img/uping.png" style="width:0.2rem;display:none;" v-bind:id="'redone'+item.marketid+lect.lectionid" /><img src="img/downing.png" style="width:0.2rem;display:none;" v-bind:id="'greenone'+item.marketid+lect.lectionid" /></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="speciexp">猜90分钟(含补时)比赛总进球的数 </span></div><div id="totalgoals" v-for="(item,index) in eventdetail.market" v-if="item.ruletype==410" name="lectionitems" class="totalgoals"><div v-bind:class="[(lect.backodds<1.01 || item.state!=1) ? 'totalgoalitemgray commonbordergray':'totalgoalitem commonborder']" v-for="(lect,index) in item.lection" v-on:click="lect.backodds>=1.01 &&clickfun($event,item.state,lect.backodds,item.marketid,lect.lectionid,'总进球',lect.lectionname)" name="itemlection"><p class="winequlo" v-bind:name="'item'+item.marketid" v-bind:id="'lectionname'+item.marketid+lect.lectionid">{{lect.lectionname}}</p><p class="winequloodds" v-bind:name="'item'+item.marketid"><span v-bind:id="item.marketid+lect.lectionid" v-bind:maxlimit="lect.maxstakelimit">{{lect.backodds}}</span><img src="img/uping.png" style="width:0.2rem;display:none;" v-bind:id="'redone'+item.marketid+lect.lectionid" /><img src="img/downing.png" style="width:0.2rem;display:none;" v-bind:id="'greenone'+item.marketid+lect.lectionid" /></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="speciexp">猜90分钟(含补时)全场比分</span></div><div id="correctscorehome" v-for="(item,index) in eventdetail.market" v-if="item.ruletype==140" name="lectionitems" class="correctscorehomeaway"><div v-bind:class="[(lect.backodds<1.01 || item.state!=1) ? 'correctscoreitemgray commonbordergray':'correctscoreitem commonborder']" v-for="(lect,index) in item.lection" v-on:click="lect.backodds>=1.01 &&clickfun($event,item.state,lect.backodds,item.marketid,lect.lectionid,'全场比分',lect.lectionname)" name="itemlection"><p class="winequlo" v-bind:name="'item'+item.marketid" v-bind:id="'lectionname'+item.marketid+lect.lectionid">{{lect.lectionname}}</p><p class="winequloodds" v-bind:name="'item'+item.marketid"><span v-bind:id="item.marketid+lect.lectionid" v-bind:maxlimit="lect.maxstakelimit">{{lect.backodds}}</span><img src="img/uping.png" style="width:0.2rem;display:none;" v-bind:id="'redone'+item.marketid+lect.lectionid" /><img src="img/downing.png" style="width:0.2rem;display:none;" v-bind:id="'greenone'+item.marketid+lect.lectionid" /></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="speciexp">猜90分钟(含补时)下一进球的球队</span></div><div id="nextgoal" v-for="(item,index) in eventdetail.market" v-if="item.ruletype==350" name="lectionitems" class="result"><div v-bind:class="[(lect.backodds<1.01 || item.state!=1) ? 'resutitemgray commonbordergray':'resutitem commonborder']" v-for="(lect,index) in item.lection" v-on:click="lect.backodds>=1.01 &&clickfun($event,item.state,lect.backodds,item.marketid,lect.lectionid,'下一进球',lect.lectionname)" name="itemlection"><p class="winequlo" v-bind:name="'item'+item.marketid" v-bind:id="'lectionname'+item.marketid+lect.lectionid">{{lect.lectionname}}</p><p class="winequloodds" v-bind:name="'item'+item.marketid"><span v-bind:id="item.marketid+lect.lectionid" v-bind:maxlimit="lect.maxstakelimit">{{lect.backodds}}</span><img src="img/uping.png" style="width:0.2rem;display:none;" v-bind:id="'redone'+item.marketid+lect.lectionid" /><img src="img/downing.png" style="width:0.2rem;display:none;" v-bind:id="'greenone'+item.marketid+lect.lectionid" /></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="guesdlists" id="contentorders" v-for="(item,index) in orders"><脱颖而出的意思;li>{{item.marketname}}</li><li>{{item.lectionname}}</li><li>{{item.fillprice}}</li><li>{{item.fillamount}}</li><li><p v-if="item.status == '0'"> 待确认</p><p v-el-if="item.status == '1'">订单正常</p><p v-el-if="item.status == '2'">{{item.netreturn}}</p><p v-el-if="item.status == '3'">订单已被取消</p><p v-el-if="item.status == '4'">订单无效</p><p v-el="item.status == '5'">订单被拒绝，投注延迟期间发生重要事件等原因</p></li></div></ul></div></div><!--赛事事件--><div class="downchangrtab" style="display: none;" v-if=""><div class="login-body" id="contentcas"><table class="whathappen" v-if="cas.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 cas" 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.cadescription.indexof('主')>-1"><td class="eventshappendleft_things"><div class="eventstext"><p class="eventstextleft_time">{{item.caminutes}}'</p><p class="eventstextleft_country">{{item.cadescription}}</p></div></td><td class="happenedmiddle"><div class="eventshappend_img"><img :src="getmatcheventimg(item.cadescription)" /></div></td><td></td></tr><tr v-if="item.cadescription.indexof('客')>-1"><td></td><td class="happenedmiddle"><div class="eventshappend_img"><img :src="getmatcheventimg(item.cadescription)" /></div></td><td class="eventshappendright_things"><div class="eventstext"><p class="eventstextright_country">{{item.cadescription}}</p><p class="eventstextright_time">{{item.caminutes}}'</p></div></td></tr><tr v-if="item.cadescription.indexof('主')<0 && item.cadescription.indexof('主')<0"><td></td><td><a class="ti tlefoc">{{item.caminutes}}'</a><a class="titlefoc">{{item.deschina}}</a></td><td></td></tr></table><table class="whathappen" v-if="cas.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" chart="utf-8"></script><script src="js/vue.min.js" type="text/javascript" chart="utf-8"></script><script src="js/common.js?ver=012902" type="text/javascript" chart="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>总结
以上所述是www.887551.com给大家介绍的html5 canvas图像模糊完美解决办法，希望对大家有所帮助
本文发布于:2023-04-03 08:19:18，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/cdabb3d662304066b79c15f636df522b.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：HTML5 Canvas图像模糊完美解决办法.doc
本文 PDF 下载地址：HTML5 Canvas图像模糊完美解决办法.pdf
| 留言与评论（共有 0 条评论） |
