HTML5中Canvas图像模糊的示例分析

tangjin
tangjin
作者

这篇文章给大家分享的是有关HTML5中Canvas图像模糊的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

1、最近在用h6的canvas画动画，发现图像特别模糊。后来终于找到罪魁祸首是<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />这个代码，因为这行代码进行了伸缩

2、模糊图像的效果：

HTML5中Canvas图像模糊的示例分析

3、将压缩去掉后的效果

HTML5中Canvas图像模糊的示例分析

可以将代码改成

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<metaname="viewport"content="user-scalable=no"/>
<title>赛事详细页</title>
<scriptsrc="js/rem.js"type="text/javascript"charset="utf-8"></script>
<linkrel="stylesheet"type="text/css"href="css/m_reset.css"/>
<linkrel="stylesheet"type="text/css"href="css/gameListsNew.css"/>
<linkhref="css/mask.css"rel="stylesheet"/>
</head>
<body>
<divclass="tipMask">
<divclass="tipBox">
<imgsrc="img/faileTip.png"class="tipsImg"/>
<divclass="fileBtn">
<imgsrc="img/fileBtn.png"/>
<spanclass="tryAgain">再试一次</span>
</div>
</div>
</div>
<div>
<imgsrc="img/whiteBack.png"class="titleImg"/>
<divclass="bgEvent"id="contentbody">
<divid="eventDetail"v-cloak>
<!--标题-->
<divclass="detailevent">
<divclass="titlevs">
<imgclass="teamFlagLogo"onerror="nofind(this);":src="'img/teamlogonew/'+eventDetail.HomeTeamID+'.png'"/>
<divclass="countryName">
{{eventDetail.HomeTeamName}}
</div>
</div>
<divclass="titlevs"style="padding-top:0.3rem;">
<div>
<!--未开赛-->
<!--<pclass="theWorldCup">世界杯</p>-->
<pclass="theGameNowDataTime">{{eventDetail.TimeFormat}}</p>
<pclass="gameBeginTime">{{getScoreOrVs(eventDetail.HomeTeamScore,eventDetail.AwayTeamScore)}}</p>
</div>
<!--开赛时长-->
<!--<div>
<p>73:40</p>
</div>-->
</div>
<divclass="titlevs">
<imgclass="teamFlagLogo"onerror="nofind(this);"
:src="'img/teamlogonew/'+eventDetail.AwayTeamID+'.png'"/>
<divclass="countryName">
{{eventDetail.AwayTeamName}}
</div>
</div>
</div>
<divid="ordersuccess"class="ordersuccess">
<divstyle="text-align:right;padding-top:0.2rem;padding-left:0.2rem;">
<imgsrc="img/ordersuccess/close.png"style="width:0.45rem;height:0.45rem;"id="closesuccess"onclick="closesuccess();"/>
</div>
<divclass="teamname">
<divclass="teamnameitem"><pclass="teamnameitemtop">{{eventDetail.HomeTeamName}}</p><br/><pclass="teamnameitembottom">HOME</p></div>
<divclass="teamnameitem"><pclass="teamnameitemmiddle">VS</p></div>
<divclass="teamnameitem"><pclass="teamnameitemtop">{{eventDetail.AwayTeamName}}</p><br/><pclass="teamnameitembottom">AWAY</p></div>
</div>
<divclass="teamdetail">
<divclass="teamdate"><span>{{eventDetail.CompetitionName}}</span><span>/</span><span>{{eventDetail.DateFormat}}</span></div>
<divclass="teamplaysselection">
<tablestyle="width:100%;text-align:left;height:100%;">
<tr>
<tdclass="teamplaysselectiontop"style="width:50%;">玩法</td>
<tdclass="teamplaysselectiontop"style="width:50%;">选项</td>
</tr>
<tr>
<tdclass="teamplaysselectionbottom"style="width:50%;"id="rulename">MatchOdds</td>
<tdclass="teamplaysselectionbottom"style="width:50%;"id="selectionname">Home</td>
</tr>
</table>
</div>
<divclass="teamwinmoney">
<tablestyle="width:90%;text-align:left;height:100%;">
<tr>
<tdclass="teamwinmoneytop"style="width:50%;">
本金
</td>
<tdclass="teamwinmoneytop"style="width:50%;">
赔率
</td>
<tdclass="teamwinmoneytop"style="width:50%;">
预赢
</td>
</tr>
<tr>
<tdclass="teamwinmoneybottom"style="width:50%;"id="betmoneysuc">1000</td>
<tdclass="teamwinmoneybottom"style="width:50%;"id="betodds">12.54</td>
<tdclass="teamwinmoneybottom"style="width:50%;"id="betwin">12540</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div>
<divclass="square"id="square">
<canvasid="courtCaseNew"width="980"height="765"></canvas>
</div>
<imgsrc="img/balllittle.png"style="width:20px;height:20px;display:none;"id="imgballNew"/>
</div>
<divclass="middlechat">
<divclass="middleitem"id="jcc">
<pclass="tabActive">竞猜场</p>
</div>
<divclass="middleitem"id="jcjl">
<pclass="tabCommon">竞猜记录</p>
</div>
<divclass="middleitem"id="sssj">
<pclass="tabCommon">赛事事件</p>
</div>
<divclass="middleitem"id="jstj">
<pclass="tabCommon">技术统计</p>
</div>
</div>
<divclass="downChangrTabquizGames"style="display:block;">
<divid="ruleTypeItems"v-cloak>
<!--胜平负-->
<divclass="diffPlaysTetx"v-for="(item,index)ineventDetail.Market"v-if="item.RuleType==100">
<spanclass="speciesName">赛果</span>
<spanclass="rotary"v-if="item.State!=1">(已封盘)</span>
<spanclass="speciesExp">猜90分钟(含补时)两队的比赛结果</span>
</div>
<divv-for="(item,index)ineventDetail.Market"v-if="item.RuleType==100"id="result"name="selectionItems"class="result">
<divv-bind:class="[(select.BackOdds<1.01||item.State!=1)?'resutitemGraycommonBorderGray':'resutitemcommonBorder']"v-for="(select,index)initem.Selection"
v-on:click="select.BackOdds>=1.01&&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,'赛果',select.SelectionName);"name="itemSelection">
<pclass="winEquLose"v-bind:name="'item'+item.MarketId">{{select.SelectionName}}</p>
<pclass="winEquLoseOdds"v-bind:name="'item'+item.MarketId">
<spanv-bind:id="item.MarketId+select.SelectionId"v-bind:maxlimit="select.MaxStakeLimit">{{select.BackOdds}}</span>
<imgsrc="img/upIng.png"style="width:0.2rem;display:none;"v-bind:id="'redOne'+item.MarketId+select.SelectionId"/>
<imgsrc="img/downIng.png"style="width:0.2rem;display:none;"v-bind:id="'greenOne'+item.MarketId+select.SelectionId"/>
</p>
</div>
</div>
<!--单双-->
<divclass="diffPlaysTetx"v-for="(item,index)ineventDetail.Market"v-if="item.RuleType==130">
<spanclass="speciesName">单双</span>
<spanclass="rotary"v-if="item.State!=1">(已封盘)</span>
<spanclass="speciesExp">猜90分钟(含补时)比赛总进球的单双</span>
</div>
<divid="oddeven"v-for="(item,index)ineventDetail.Market"v-if="item.RuleType==130"name="selectionItems"class="oddeven">
<divv-bind:class="[(select.BackOdds<1.01||item.State!=1)?'oddevenitemGraycommonBorderGray':'oddevenitemcommonBorder']"v-for="(select,index)initem.Selection"v-on:click="select.BackOdds>=1.01&&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,'单双',select.SelectionName)"name="itemSelection">
<pclass="winEquLose"v-bind:name="'item'+item.MarketId"v-bind:id="'selectionname'+item.MarketId+select.SelectionId">{{select.SelectionName}}</p>
<pclass="winEquLoseOdds"v-bind:name="'item'+item.MarketId">
<spanv-bind:id="item.MarketId+select.SelectionId"v-bind:maxlimit="select.MaxStakeLimit">{{select.BackOdds}}</span>
<imgsrc="img/upIng.png"style="width:0.2rem;display:none;"v-bind:id="'redOne'+item.MarketId+select.SelectionId"/>
<imgsrc="img/downIng.png"style="width:0.2rem;display:none;"v-bind:id="'greenOne'+item.MarketId+select.SelectionId"/>
</p>
</div>
</div>
<!--总进球-->
<divclass="diffPlaysTetx"v-for="(item,index)ineventDetail.Market"v-if="item.RuleType==410">
<spanclass="speciesName">总进球</span>
<spanclass="rotary"v-if="item.State!=1">(已封盘)</span>
<spanclass="speciesExp">猜90分钟(含补时)比赛总进球的数</span>
</div>
<divid="totalGoals"v-for="(item,index)ineventDetail.Market"v-if="item.RuleType==410"name="selectionItems"class="totalGoals">
<divv-bind:class="[(select.BackOdds<1.01||item.State!=1)?'totalGoalitemGraycommonBorderGray':'totalGoalitemcommonBorder']"v-for="(select,index)initem.Selection"v-on:click="select.BackOdds>=1.01&&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,'总进球',select.SelectionName)"name="itemSelection">
<pclass="winEquLose"v-bind:name="'item'+item.MarketId"v-bind:id="'selectionname'+item.MarketId+select.SelectionId">{{select.SelectionName}}</p>
<pclass="winEquLoseOdds"v-bind:name="'item'+item.MarketId">
<spanv-bind:id="item.MarketId+select.SelectionId"v-bind:maxlimit="select.MaxStakeLimit">{{select.BackOdds}}</span>
<imgsrc="img/upIng.png"style="width:0.2rem;display:none;"v-bind:id="'redOne'+item.MarketId+select.SelectionId"/>
<imgsrc="img/downIng.png"style="width:0.2rem;display:none;"v-bind:id="'greenOne'+item.MarketId+select.SelectionId"/>
</p>
</div>
</div>
<!--全场比分-->
<divclass="diffPlaysTetx"v-for="(item,index)ineventDetail.Market"v-if="item.RuleType==140">
<spanclass="speciesName">全场比分</span>
<spanclass="rotary"v-if="item.State!=1">(已封盘)</span>
<spanclass="speciesExp">猜90分钟(含补时)全场比分</span>
</div>
<divid="correctScoreHome"v-for="(item,index)ineventDetail.Market"v-if="item.RuleType==140"name="selectionItems"class="correctScoreHomeAway">
<divv-bind:class="[(select.BackOdds<1.01||item.State!=1)?'correctScoreitemGraycommonBorderGray':'correctScoreitemcommonBorder']"v-for="(select,index)initem.Selection"v-on:click="select.BackOdds>=1.01&&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,'全场比分',select.SelectionName)"name="itemSelection">
<pclass="winEquLose"v-bind:name="'item'+item.MarketId"v-bind:id="'selectionname'+item.MarketId+select.SelectionId">{{select.SelectionName}}</p>
<pclass="winEquLoseOdds"v-bind:name="'item'+item.MarketId">
<spanv-bind:id="item.MarketId+select.SelectionId"v-bind:maxlimit="select.MaxStakeLimit">{{select.BackOdds}}</span>
<imgsrc="img/upIng.png"style="width:0.2rem;display:none;"v-bind:id="'redOne'+item.MarketId+select.SelectionId"/>
<imgsrc="img/downIng.png"style="width:0.2rem;display:none;"v-bind:id="'greenOne'+item.MarketId+select.SelectionId"/>
</p>
</div>
</div>
<divclass="downImg"onclick="clickImg()">
<imgsrc="img/toDown.png"/>
</div>
<!--下一进球-->
<divclass="diffPlaysTetx"v-for="(item,index)ineventDetail.Market"v-if="item.RuleType==350">
<spanclass="speciesName">下一进球</span>
<spanclass="rotary"v-if="item.State!=1">(已封盘)</span>
<spanclass="speciesExp">猜90分钟(含补时)下一进球的球队</span>
</div>
<divid="nextgoal"v-for="(item,index)ineventDetail.Market"v-if="item.RuleType==350"name="selectionItems"class="result">
<divv-bind:class="[(select.BackOdds<1.01||item.State!=1)?'resutitemGraycommonBorderGray':'resutitemcommonBorder']"v-for="(select,index)initem.Selection"v-on:click="select.BackOdds>=1.01&&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,'下一进球',select.SelectionName)"name="itemSelection">
<pclass="winEquLose"v-bind:name="'item'+item.MarketId"v-bind:id="'selectionname'+item.MarketId+select.SelectionId">{{select.SelectionName}}</p>
<pclass="winEquLoseOdds"v-bind:name="'item'+item.MarketId">
<spanv-bind:id="item.MarketId+select.SelectionId"v-bind:maxlimit="select.MaxStakeLimit">{{select.BackOdds}}</span>
<imgsrc="img/upIng.png"style="width:0.2rem;display:none;"v-bind:id="'redOne'+item.MarketId+select.SelectionId"/>
<imgsrc="img/downIng.png"style="width:0.2rem;display:none;"v-bind:id="'greenOne'+item.MarketId+select.SelectionId"/>
</p>
</div>
<divclass=""style="width:100%;height:0.45rem;"></div>
</div>
<divclass="perchDiv"style="width:100%;height:3rem;"></div>
</div>
</div>
<!--竞猜记录-->
<divclass="downChangrTabguessRecord">
<divclass="hide-body"id="dialogorders">
<divclass="tableNameGuess">
<li>玩法</li>
<li>选项</li>
<li>赔率</li>
<li>本金</li>
<li>结果</li>
</div>
<ulstyle="background:#FFFFFF;height:4.79rem;overflow:scroll;">
<divclass="guessedLists"id="contentOrders"v-for="(item,index)inorders">
<li>
{{item.MarketName}}
</li>
<li>
{{item.SelectionName}}
</li>
<li>
{{item.FillPrice}}
</li>
<li>
{{item.FillAmount}}
</li>
<li>
<pv-if="item.Status=='0'">待确认</p>
<pv-else-if="item.Status=='1'">订单正常</p>
<pv-else-if="item.Status=='2'">{{item.NetReturn}}</p>
<pv-else-if="item.Status=='3'">订单已被取消</p>
<pv-else-if="item.Status=='4'">订单无效</p>
<pv-else="item.Status=='5'">订单被拒绝，投注延迟期间发生重要事件等原因</p>
</li>
</div>
</ul>
</div>
</div>
<!--赛事事件-->
<divclass="downChangrTab"style="display:none;"v-if="">
<divclass="login-body"id="contentCases">
<tableclass="whatHappen"v-if="cases.length>0">
<tr>
<td></td>
<tdclass="happenedMiddle">
<divclass="happenedMiddle_top"style="margin-top:0.4rem;"></div>
</td>
<td></td>
</tr>
</table>
<tableclass="whatHappen"style=""v-for="(item,index)incases"border="0"cellspacing="0"cellpadding="0">
<tr>
<td></td>
<tdclass="happenedMiddle">
<divclass="happenedMiddle_line"></div>
</td>
<td></td>
</tr>
<trv-if="item.CaseDescription.indexOf('主')>-1">
<tdclass="eventsHappendLeft_things">
<divclass="eventsText">
<pclass="eventsTextLeft_time">{{item.CaseMinutes}}'</p>
<pclass="eventsTextLeft_Country">{{item.CaseDescription}}</p>
</div>
</td>
<tdclass="happenedMiddle">
<divclass="eventsHappend_img">
<img:src="GetMatchEventImg(item.CaseDescription)"/>
</div>
</td>
<td></td>
</tr>
<trv-if="item.CaseDescription.indexOf('客')>-1">
<td></td>
<tdclass="happenedMiddle">
<divclass="eventsHappend_img">
<img:src="GetMatchEventImg(item.CaseDescription)"/>
</div>
</td>
<tdclass="eventsHappendRight_things">
<divclass="eventsText">
<pclass="eventsTextRight_Country">{{item.CaseDescription}}</p>
<pclass="eventsTextRight_time">{{item.CaseMinutes}}'</p>
</div>
</td>
</tr>
<trv-if="item.CaseDescription.indexOf('主')<0&&item.CaseDescription.indexOf('主')<0">
<td></td>
<td>
<aclass="titlefoc">{{item.CaseMinutes}}'</a>
<aclass="titlefoc">{{item.DesChina}}</a>
</td>
<td></td>
</tr>
</table>
<tableclass="whatHappen"v-if="cases.length>0">
<tr>
<td></td>
<tdclass="happenedMiddle">
<divclass="happenedMiddle_line"></div>
<divclass="happenedMiddle_top"></div>
</td>
<td></td>
</tr>
</table>
<!--<divstyle="width:100%;height:2.7rem;"></div>-->
</div>
</div>
<!--技术统计-->
<divclass="downChangrTab"style="display:none;">
<divclass="skillInfoGaryBg"id="stutsskillsData">
<divclass="skillInfo"v-for="(item,index)inskillsData">
<liclass="shotsOnTargets">
<divclass="shotsOnTargets_left">
<pclass="skillsTextFonts">{{item.AwayTeamValue}}</p>
<divclass="sotl_bg">
<divclass="sotl_bgProgress"></div>
</div>
</div>
<divclass="shotsOnTargets_middle">
<img:src="GetMatchStatsImage(item.StatsType)"/>
<pclass="shills_name">{{item.StatsType}}</p>
</div>
<divclass="shotsOnTargets_right">
<pclass="skillsTextFonts">{{item.HomeTeamValue}}</p>
<divclass="sotl_bg">
<divclass="sotl_bgProgress"></div>
</div>
</div>
</li>
</div>
</div>
</div>
</div>
<!--底部下单-->
<divclass="buttomOrder">
<!--金额输入-->
<!--竞猜金额-->
<divclass="aboutMoney">
<inputtype="text"name=""id="betmoney"class="gussMoney"value="竞猜金额"placeholder=""readonly="readonly"v-model="gussMoney"/>
<imgsrc="img/clearBetMoney.png"class="clearGussMoney"id="clearGussMoney"/>
<!--余额-->
<spanclass="balanceMoney"id="minemoney">我的余额：888</span>
<!--下注金额-->
<divclass="diffGussMoney"style="text-align:center;">
<ul>
<liname="bettingmoney"class="difGuMonCom"val="100">+100</li>
<liname="bettingmoney"class="difGuMonCom"val="500">+500</li>
<liname="bettingmoney"class="difGuMonCom"val="1000">+1000</li>
<liclass="difGuMonCom"id="allin"style="line-height:0.5rem;">
<pstyle="height:0.3rem;">All<spanstyle="margin-left:0.05rem;">in</span></p>
<pid="allinvalue"style="height:0.3rem;">100</p>
</li>
</ul>
</div>
<!--确定-->
<pclass="subSuresubSureRed"style="text-align:center;"onclick="CreateOrder();"id="subSure">
确定
</p>
</div>
</div>
<!--下单成功后遮罩层-->
<divid="overlay"class="overlay"></div>
</div>
<div>
<imgsrc="img/goal/goalball.png"/>
<imgsrc="img/goal/goal.png"/>
<imgsrc="img/goal/fireworks.png"/>
</div>
<scriptsrc="js/jquery-1.10.2.min.js"type="text/javascript"charset="utf-8"></script>
<scriptsrc="js/vue.min.js"type="text/javascript"charset="utf-8"></script>
<scriptsrc="js/common.js?ver=012902"type="text/javascript"charset="utf-8"></script>
<scriptsrc="js/jquery.cookie.min.js"></script>
<scriptsrc="js/mask.js?ver=012901"></script>
<scripttype="text/javascript"src="js/eventDetailsNew.js?ver=012908"></script>
<scriptsrc="../js/animation.js"></script>
</body>
</html>

感谢各位的阅读！关于“HTML5中Canvas图像模糊的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

阅读全文
发布于 2021-05-30 14:09:33
html5
收藏
分享
海报
0 条评论
173
上一篇：html2canvas截图不能截取圆角图片怎么办 下一篇：html2canvas如何实现将div保存图片高清图
目录

    推荐阅读

    0 条评论

    本站已关闭游客评论，请登录或者注册后再评论吧~

    忘记密码？

    图形验证码