recherche
Maisoninterface WebTutoriel H5Comment résoudre le flou de l'image HTML5 Canvas

Comment résoudre le flou de l'image HTML5 Canvas

小云云
小云云
Feb 07, 2018 am 09:19 AM
canvash5html5

Cet article vous présente principalement la solution parfaite au flou d'image HTML5 Canvas. Les amis qui en ont besoin peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

1. J'ai récemment utilisé le canevas h5 pour dessiner des animations et j'ai trouvé que l'image était particulièrement floue. Plus tard, j'ai finalement découvert que le coupable était le code 

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

, car cette ligne de code était étirée

2. L'effet de flou de l'image :

3. L'effet après suppression de la compression

Vous pouvez changer le code en 


<!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  class="tipsImg lazy"  src="/static/imghwm/default1.png"  data-src="img/faileTip.png"    / alt="Comment résoudre le flou de l'image HTML5 Canvas" >
            <p class="fileBtn">
                <img  src="/static/imghwm/default1.png"  data-src="img/fileBtn.png"  class="lazy"   / alt="Comment résoudre le flou de l'image HTML5 Canvas" >
                <span class="tryAgain">再试一次</span>
            </p>
        </p>
    </p>
    <p>
        <img  class="titleImg lazy"  src="/static/imghwm/default1.png"  data-src="img/whiteBack.png"    / alt="Comment résoudre le flou de l'image HTML5 Canvas" >
        <p class="bgEvent" id="contentbody">
            <p id="eventDetail" v-cloak>
                <!--标题-->
                <p class="detailevent">
                    <p class="titlevs">
                        <img  class="teamFlagLogo lazy"  src="/static/imghwm/default1.png"  data-src="&#39;img/teamlogonew/&#39;+eventDetail.HomeTeamID+&#39;.png&#39;"   onerror="nofind(this);" : / alt="Comment résoudre le flou de l'image HTML5 Canvas" >
                        <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 lazy"  src="/static/imghwm/default1.png"  data-src="&#39;img/teamlogonew/&#39;+eventDetail.AwayTeamID+&#39;.png&#39;"   onerror="nofind(this);"
                             : />
                        <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="/static/imghwm/default1.png"  data-src="img/ordersuccess/close.png"  class="lazy"     style="max-width:90%" id="closesuccess" onclick="closesuccess();" / alt="Comment résoudre le flou de l'image HTML5 Canvas" >
                    </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="/static/imghwm/default1.png"  data-src="img/balllittle.png"  class="lazy"     style="max-width:90%" id="imgballNew" / alt="Comment résoudre le flou de l'image HTML5 Canvas" >
            </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) ? &#39;resutitemGray commonBorderGray&#39;:&#39;resutitem commonBorder&#39;]" v-for="(select,index) in item.Selection"
                             v-on:click="select.BackOdds>=1.01 &&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,&#39;赛果&#39;,select.SelectionName);" name="itemSelection">
                            <p class="winEquLose" v-bind:name="&#39;item&#39;+item.MarketId">{{select.SelectionName}}</p>
                            <p class="winEquLoseOdds " v-bind:name="&#39;item&#39;+item.MarketId">
                                <span v-bind:id="item.MarketId+select.SelectionId" v-bind:maxlimit="select.MaxStakeLimit">{{select.BackOdds}}</span>
                                <img  src="/static/imghwm/default1.png"  data-src="img/upIng.png"  class="lazy"     style="max-width:90%" v-bind:id="&#39;redOne&#39;+item.MarketId+select.SelectionId" / alt="Comment résoudre le flou de l'image HTML5 Canvas" >
                                <img  src="/static/imghwm/default1.png"  data-src="img/downIng.png"  class="lazy"     style="max-width:90%" v-bind:id="&#39;greenOne&#39;+item.MarketId+select.SelectionId" / alt="Comment résoudre le flou de l'image HTML5 Canvas" >
                            </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) ? &#39;oddevenitemGray commonBorderGray&#39;:&#39;oddevenitem commonBorder&#39;]" v-for="(select,index) in item.Selection" v-on:click="select.BackOdds>=1.01 &&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,&#39;单双&#39;,select.SelectionName)" name="itemSelection">
                            <p class="winEquLose" v-bind:name="&#39;item&#39;+item.MarketId" v-bind:id="&#39;selectionname&#39;+item.MarketId+select.SelectionId">{{select.SelectionName}}</p>
                            <p class="winEquLoseOdds" v-bind:name="&#39;item&#39;+item.MarketId">
                                <span v-bind:id="item.MarketId+select.SelectionId" v-bind:maxlimit="select.MaxStakeLimit">{{select.BackOdds}}</span>
                                <img  src="/static/imghwm/default1.png"  data-src="img/upIng.png"  class="lazy"     style="max-width:90%" v-bind:id="&#39;redOne&#39;+item.MarketId+select.SelectionId" / alt="Comment résoudre le flou de l'image HTML5 Canvas" >
                                <img  src="/static/imghwm/default1.png"  data-src="img/downIng.png"  class="lazy"     style="max-width:90%" v-bind:id="&#39;greenOne&#39;+item.MarketId+select.SelectionId" / alt="Comment résoudre le flou de l'image HTML5 Canvas" >
                            </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) ? &#39;totalGoalitemGray commonBorderGray&#39;:&#39;totalGoalitem commonBorder&#39;]" v-for="(select,index) in item.Selection" v-on:click="select.BackOdds>=1.01 &&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,&#39;总进球&#39;,select.SelectionName)" name="itemSelection">
                            <p class="winEquLose" v-bind:name="&#39;item&#39;+item.MarketId" v-bind:id="&#39;selectionname&#39;+item.MarketId+select.SelectionId">{{select.SelectionName}}</p>
                            <p class="winEquLoseOdds" v-bind:name="&#39;item&#39;+item.MarketId">
                                <span v-bind:id="item.MarketId+select.SelectionId" v-bind:maxlimit="select.MaxStakeLimit">{{select.BackOdds}}</span>
                                <img  src="/static/imghwm/default1.png"  data-src="img/upIng.png"  class="lazy"     style="max-width:90%" v-bind:id="&#39;redOne&#39;+item.MarketId+select.SelectionId" / alt="Comment résoudre le flou de l'image HTML5 Canvas" >
                                <img  src="/static/imghwm/default1.png"  data-src="img/downIng.png"  class="lazy"     style="max-width:90%" v-bind:id="&#39;greenOne&#39;+item.MarketId+select.SelectionId" / alt="Comment résoudre le flou de l'image HTML5 Canvas" >
                            </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) ? &#39;correctScoreitemGray commonBorderGray&#39;:&#39;correctScoreitem commonBorder&#39;]" v-for="(select,index) in item.Selection" v-on:click="select.BackOdds>=1.01 &&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,&#39;全场比分&#39;,select.SelectionName)" name="itemSelection">
                            <p class="winEquLose" v-bind:name="&#39;item&#39;+item.MarketId" v-bind:id="&#39;selectionname&#39;+item.MarketId+select.SelectionId">{{select.SelectionName}}</p>
                            <p class="winEquLoseOdds" v-bind:name="&#39;item&#39;+item.MarketId">
                                <span v-bind:id="item.MarketId+select.SelectionId" v-bind:maxlimit="select.MaxStakeLimit">{{select.BackOdds}}</span>
                                <img  src="/static/imghwm/default1.png"  data-src="img/upIng.png"  class="lazy"     style="max-width:90%" v-bind:id="&#39;redOne&#39;+item.MarketId+select.SelectionId" / alt="Comment résoudre le flou de l'image HTML5 Canvas" >
                                <img  src="/static/imghwm/default1.png"  data-src="img/downIng.png"  class="lazy"     style="max-width:90%" v-bind:id="&#39;greenOne&#39;+item.MarketId+select.SelectionId" / alt="Comment résoudre le flou de l'image HTML5 Canvas" >
                            </p>
                        </p>
                    </p>
                    <p class="downImg" onclick="clickImg()">
                        <img  src="/static/imghwm/default1.png"  data-src="img/toDown.png"  class="lazy"   / alt="Comment résoudre le flou de l'image HTML5 Canvas" >
                    </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) ? &#39;resutitemGray commonBorderGray&#39;:&#39;resutitem commonBorder&#39;]" v-for="(select,index) in item.Selection" v-on:click="select.BackOdds>=1.01 &&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,&#39;下一进球&#39;,select.SelectionName)" name="itemSelection">
                            <p class="winEquLose" v-bind:name="&#39;item&#39;+item.MarketId" v-bind:id="&#39;selectionname&#39;+item.MarketId+select.SelectionId">{{select.SelectionName}}</p>
                            <p class="winEquLoseOdds" v-bind:name="&#39;item&#39;+item.MarketId">
                                <span v-bind:id="item.MarketId+select.SelectionId" v-bind:maxlimit="select.MaxStakeLimit">{{select.BackOdds}}</span>
                                <img  src="/static/imghwm/default1.png"  data-src="img/upIng.png"  class="lazy"     style="max-width:90%" v-bind:id="&#39;redOne&#39;+item.MarketId+select.SelectionId" / alt="Comment résoudre le flou de l'image HTML5 Canvas" >
                                <img  src="/static/imghwm/default1.png"  data-src="img/downIng.png"  class="lazy"     style="max-width:90%" v-bind:id="&#39;greenOne&#39;+item.MarketId+select.SelectionId" / alt="Comment résoudre le flou de l'image HTML5 Canvas" >
                            </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 == &#39;0&#39;"> 待确认</p>
                                <p v-else-if="item.Status == &#39;1&#39;">订单正常</p>
                                <p v-else-if="item.Status == &#39;2&#39;">{{item.NetReturn}}</p>
                                <p v-else-if="item.Status == &#39;3&#39;">订单已被取消</p>
                                <p v-else-if="item.Status == &#39;4&#39;">订单无效</p>
                                <p v-else="item.Status == &#39;5&#39;">订单被拒绝，投注延迟期间发生重要事件等原因</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"  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(&#39;主&#39;)>-1">
                            <td class="eventsHappendLeft_things">
                                <p class="eventsText">
                                    <p class="eventsTextLeft_time">{{item.CaseMinutes}}&#39;</p>
                                    <p class="eventsTextLeft_Country">{{item.CaseDescription}}</p>
                                </p>
                            </td>
                            <td class="happenedMiddle">
                                <p class="eventsHappend_img">
                                    <img  src="/static/imghwm/default1.png"  data-src="GetMatchEventImg(item.CaseDescription)"  class="lazy"  : / alt="Comment résoudre le flou de l'image HTML5 Canvas" >
                                </p>
                            </td>
                            <td></td>
                        </tr>
                        <tr v-if="item.CaseDescription.indexOf(&#39;客&#39;)>-1">
                            <td></td>
                            <td class="happenedMiddle">
                                <p class="eventsHappend_img">
                                    <img  src="/static/imghwm/default1.png"  data-src="GetMatchEventImg(item.CaseDescription)"  class="lazy"  : / alt="Comment résoudre le flou de l'image HTML5 Canvas" >
                                </p>
                            </td>
                            <td class="eventsHappendRight_things">
                                <p class="eventsText">
                                    <p class="eventsTextRight_Country">{{item.CaseDescription}}</p>
                                    <p class="eventsTextRight_time">{{item.CaseMinutes}}&#39;</p>
                                </p>
                            </td>
                        </tr>
                        <tr v-if="item.CaseDescription.indexOf(&#39;主&#39;)<0 && item.CaseDescription.indexOf(&#39;主&#39;)<0">
                            <td></td>
                            <td>
                                <a class="ti tlefoc">{{item.CaseMinutes}}&#39;</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="/static/imghwm/default1.png"  data-src="GetMatchStatsImage(item.StatsType)"  class="lazy"  : / alt="Comment résoudre le flou de l'image HTML5 Canvas" >
                                <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  class="clearGussMoney lazy"  src="/static/imghwm/default1.png"  data-src="img/clearBetMoney.png"    id="clearGussMoney" / alt="Comment résoudre le flou de l'image HTML5 Canvas" >
                <!--余额-->
                <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="/static/imghwm/default1.png"  data-src="img/goal/goalball.png"  class="lazy"   / alt="Comment résoudre le flou de l'image HTML5 Canvas" >
        <img  src="/static/imghwm/default1.png"  data-src="img/goal/goal.png"  class="lazy"   / alt="Comment résoudre le flou de l'image HTML5 Canvas" >
        <img  src="/static/imghwm/default1.png"  data-src="img/goal/fireworks.png"  class="lazy"   / alt="Comment résoudre le flou de l'image HTML5 Canvas" >
    </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>

Recommandations associées :

Exemple d'implémentation JavaScript du flou d'image

Implémentation JavaScript de code d'algorithme de flou d'image Compétences Share_javascript

Comment résoudre le problème des images floues dessinées dans Canvas ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article connexe
Déconstruire le code H5: étiquettes, éléments et attributsDéconstruire le code H5: étiquettes, éléments et attributsApr 18, 2025 am 12:06 AM

Le code HTML5 se compose d'étiquettes, d'éléments et d'attributs: 1. La balise définit le type de contenu et est entourée de supports d'angle, tels que. 2. Les éléments sont composés d'étiquettes de démarrage, de contenus et de balises d'extrémité, telles que le contenu. 3. Les attributs définissent les paires de valeurs clés dans la balise de démarrage, améliorent les fonctions, telles que. Ce sont les unités de base pour créer une structure Web.

Comprendre le code H5: les principes fondamentaux de HTML5Comprendre le code H5: les principes fondamentaux de HTML5Apr 17, 2025 am 12:08 AM

HTML5 est une technologie clé pour créer des pages Web modernes, offrant de nombreux nouveaux éléments et fonctionnalités. 1. HTML5 introduit des éléments sémantiques tels que, etc., qui améliore la structure des pages Web et le référencement. 2. Prise en charge des éléments multimédias et des supports intégrés sans plug-ins. 3. Les formulaires améliorent les nouveaux types d'entrée et les propriétés de vérification, simplifiant le processus de vérification. 4. Offrez des fonctions de stockage hors ligne et locales pour améliorer les performances des pages Web et l'expérience utilisateur.

Code H5: meilleures pratiques pour les développeurs WebCode H5: meilleures pratiques pour les développeurs WebApr 16, 2025 am 12:14 AM

Les meilleures pratiques pour le code H5 incluent: 1. Utilisez des déclarations de doctype correctes et l'encodage des caractères; 2. Utilisez des balises sémantiques; 3. Réduire les demandes HTTP; 4. Utiliser le chargement asynchrone; 5. Optimiser les images. Ces pratiques peuvent améliorer l'efficacité, la maintenabilité et l'expérience utilisateur des pages Web.

H5: L'évolution des normes et technologies WebH5: L'évolution des normes et technologies WebApr 15, 2025 am 12:12 AM

Les normes et technologies Web ont évolué à ce jour de HTML4, CSS2 et JavaScript simple et ont subi des développements importants. 1) HTML5 introduit des API telles que Canvas et WebStorage, ce qui améliore la complexité et l'interactivité des applications Web. 2) CSS3 ajoute des fonctions d'animation et de transition pour rendre la page plus efficace. 3) JavaScript améliore l'efficacité de développement et la lisibilité du code par la syntaxe moderne de Node.js et ES6, telles que les fonctions et classes Arrow. Ces changements ont favorisé le développement de l'optimisation des performances et les meilleures pratiques des applications Web.

H5 est-il un raccourci pour HTML5? Explorer les détailsH5 est-il un raccourci pour HTML5? Explorer les détailsApr 14, 2025 am 12:05 AM

H5 n'est pas seulement l'abréviation de HTML5, il représente un écosystème de technologie de développement Web moderne plus large: 1. H5 comprend HTML5, CSS3, JavaScript et API et technologies connexes; 2. Il offre une expérience utilisateur plus riche, interactive et fluide et peut fonctionner de manière transparente sur plusieurs appareils; 3. À l'aide de la pile de technologie H5, vous pouvez créer des pages Web réactives et des fonctions interactives complexes.

H5 et HTML5: termes couramment utilisés dans le développement WebH5 et HTML5: termes couramment utilisés dans le développement WebApr 13, 2025 am 12:01 AM

H5 et HTML5 se réfèrent à la même chose, à savoir HTML5. HTML5 est la cinquième version de HTML, apportant de nouvelles fonctionnalités telles que les balises sémantiques, la prise en charge multimédia, la toile et les graphiques, le stockage hors ligne et le stockage local, l'amélioration de l'expressivité et de l'interactivité des pages Web.

À quoi se réfère H5? Explorer le contexteÀ quoi se réfère H5? Explorer le contexteApr 12, 2025 am 12:03 AM

H5Referstohtml5, apivotaltechnologyInwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp OrtsMultimeDiaHithoutPlugins, améliorant la réception detièmeaCrOsDevices.3) SemantelelementsImproveContentsTructureAndSeo.4) H5'sRespo

H5: outils, cadres et meilleures pratiquesH5: outils, cadres et meilleures pratiquesApr 11, 2025 am 12:11 AM

Les outils et les frameworks qui doivent être maîtrisés dans le développement H5 incluent Vue.js, React et WebPack. 1.Vue.js convient à la construction d'interfaces utilisateur et prend en charge le développement des composants. 2. React optimise le rendu de la page via Virtual DOM, adapté aux applications complexes. 3.WebPack est utilisé pour l'emballage des modules et optimiser le chargement des ressources.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Solution d'énigmes de coquille
3 Il y a quelques semainesByDDD
Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour
2 Il y a quelques semainesByDDD
Will R.E.P.O. Vous avez un jeu croisé?
1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌
Afficher plus

Outils chauds

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Version Mac de WebStorm

Version Mac de WebStorm

Outils de développement JavaScript utiles

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

DVWA

DVWA

Damn Vulnerable Web App (DVWA) est une application Web PHP/MySQL très vulnérable. Ses principaux objectifs sont d'aider les professionnels de la sécurité à tester leurs compétences et leurs outils dans un environnement juridique, d'aider les développeurs Web à mieux comprendre le processus de sécurisation des applications Web et d'aider les enseignants/étudiants à enseigner/apprendre dans un environnement de classe. Application Web sécurité. L'objectif de DVWA est de mettre en pratique certaines des vulnérabilités Web les plus courantes via une interface simple et directe, avec différents degrés de difficulté. Veuillez noter que ce logiciel

Dreamweaver Mac

Dreamweaver Mac

Outils de développement Web visuel

Afficher plus

Sujets chauds

Où se trouve l’entrée de connexion pour la messagerie Gmail ?
7547
15
Tutoriel CakePHP
1382
52
Quel est le format du nom de compte de Steam
83
11
Clé d&amp;amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent
57
19
NYT Connexions Indices et réponses
22
90
Afficher plus