本文主要包含Canvas,HTML5,h5等相关知识,匿名希望在学习及工作中可以帮助到您
本文主要和大家介绍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">