双恒 HTML5 Canvas图像模糊如何解决
本文主要和大家介绍HTML5 Canvas图像模糊完美解决办法,需要的朋友可以参考下，希望能帮助到大家。
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实现的图像模糊算法代码分享_javascript技巧
Canvas绘制图片模糊该如何解决？
以上就是HTML5 Canvas图像模糊如何解决的详细内容，更多请关注双恒网络其它相关文章！
