HTML5 Canvas图像模糊完美解决办法
- 作者: 熙沫女神
- 来源: 51数据库
- 2021-08-15
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" />
<link rel="stylesheet" type="text/css" />
<link 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图像模糊完美解决办法，希望对大家有所帮助
推荐阅读
