H5 Canvas maximum-scale图像模糊解决办法

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" οnerrοr="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" οnerrοr="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" οnclick="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" οnclick="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;" οnclick="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>

转载于:https://www.cnblogs.com/honghong75042/p/8420983.html

H5 Canvas maximum-scale图像模糊解决办法相关推荐

WebView无法自动播放h5的video视频标签解决办法
由于项目需求,在进入webview时需要自动播放h5里的video视频,国内网上找了比较多方案都不行,最后还是在Google上找到了解决办法: stackoverflow 加入一行代码: webVie ...
bypy报错Error 140: Maximum retries reached解决办法
解决办法: 先执行:bypy refreshtoken 再执行:bypy info后,再下载即可成功. 错误信息如下: eve@Eve:~/verify$ bypy info <E> [1 ...
小程序canvas头像不显示解决办法
小程序生成二维码分享,真机没问题,但正式版头像却出不来微信有一部分从第三方引入的用户头像是 https://thirdwx.qlogo.cn或https://wx.qlogo.cn 开头的路径 ca ...
坑！！！高清解决方案导致iOS 上h5页面滑不动的解决办法
首选这个问题出现在我们一个h5页面的首页上,滑不动!在iPhone X和iPhone 11上并且系统版本发现是13.2.2,而iPhone X Max 系统版本12.2的并没有出现.所以我估摸着应 ...
对称矩阵标准化以后不是对称矩阵的原因和解决办法
问题描述在处理数据时需要对一个对称矩阵做标准化,相当于把矩阵的所有数看成一个整体,但使用R语言的scale函数得出的结果是不对称矩阵原因平时处理数据时,最常见的格式是每一列代表一个维度,每一行代 ...
Maximum execution time of 30 seconds exceeded解决办法
https://blog.csdn.net/ghostyusheng/article/details/50593565 今天给朋友配置wamp的时候,刚刚搭建好,打开一个本地站就出现这个错误, Max ...
php.ini 延迟,php超时报错Maximum execution time of 120 seconds exceeded in解决办法
PHP脚本报错:Maximum execution time of 120 seconds exceeded in 这里的120秒,不定,系统默认是30秒,意思就是说在120秒内PHP脚本执行超时了. ...
java.net.SocketException:No buffer space avaliable(maximum connection reached?):JVM_Bind 解决办法...
No buffer space available 2009-06-15 14:03 java.net.SocketException: No buffer space available (maxi ...
总结的若干关于RecursionError: maximum recursion depth exceeded问题的解决办法
情形一: pyinstaller打包时遇到, RecursionError: maximum recursion depth exceeded是递归错误,大概率是自己调用自己太多次导致的. 解法一: ...

H5 Canvas maximum-scale图像模糊解决办法

H5 Canvas maximum-scale图像模糊解决办法相关推荐

最新文章

热门文章