HTML5 Canvas图像模糊如何解决
导读：收集整理的这篇文章主要介绍了HTML5 Canvas图像模糊如何解决，觉得挺不错的，现在分享给大家，也给大家做个参考。本文主要和大家介绍HTML5 canvas图像模糊完美解决办法,需要的朋友可以参考下，希望能帮助到大家。1、最近在用h5的...
收集整理的这篇文章主要介绍了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.BackOdds1.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="@R_753_2406@quLose" 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.BackOdds1.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.BackOdds1.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.BackOdds1.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.BackOdds1.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图像模糊如何解决的详细内容，更多请关注其它相关文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML5 Canvas图像模糊如何解决
本文地址： https://pptw.com/jishu/583812.html