月26日今天晚上，第18屆亞運會電競表演賽王者榮耀國際版（AoV）決賽剛剛結束，中國團隊以僅失1小局的賽績，為中國電競團隊摘下2018雅加達亞運會電競表演賽首金，這是電競首次進入亞運會，中國團隊在這個歷史時刻拿下了賽會首金。

為了拿到一個冠軍，這次需要靠“你”了！掃二維碼進入“少年！這一次亞運需要你?。　鄙蓪俚膴Z金時刻！

當五星紅旗第一次飄揚在亞運電競賽場上的時候，相信這一刻會被永遠載入史冊。

北京時間8月26日早9點30分，第18屆亞運會電競表演賽的開幕式在印尼首都雅加達北部的馬哈卡廣場舉行。這一天，無論對全球無數的電競迷來說，還是對傳統的綜合性運動會來說，都有著里程碑式的意義。

本屆亞運會，中國代表團一共由一千二百多人組成，其中運動員有845名，將參加38個大項，376個小項的比賽。而電競表演項目隊伍由13名運動員和2名教練員組成，運動員分別是英雄聯盟中國團隊嚴君澤、蘇漢偉、劉世宇、簡自豪、田野、史森明，王者榮耀國際版（AoV）中國團隊張宇辰、潘佳東、向陽、劉明杰、謝濤、王添龍及皇室戰爭中國團隊黃成輝。這也是電競第一次踏上亞運會的舞臺，中國團隊的旗手為皇室戰爭運動員黃成輝。

亞洲電子體育聯合會主席霍啟剛發表致辭并與亞洲奧林匹克理事會（OCA）終身名譽主席魏紀中、第18屆亞運會組委會主席埃里克·托希爾、 騰訊互動娛樂自研&綜合市場部總經理 騰訊電競業務負責人 侯淼、暴雪國際業務代表Mr. Jinwoo Choi及 Konami電子競技部門負責人Mr. Kazunari Sarugaku 等人共同宣布亞運會電競表演正式開幕。

2018亞運會電競表演賽王者榮耀國際版（AoV）項目正式開戰后，中國團隊勢如破竹，以勝者組第一的身份進軍決賽。揭幕戰迎戰強敵泰國，成功以2-0拿下開門紅；2-0復仇預選賽第一名的中國臺北，甚至在第二局中以13-0的人頭數零封對手；勝者組的最后一戰，中國團隊三度逆天翻盤，最后一局龍坑團戰一波，戰勝越南，挺進決賽；在與中國臺北二度交鋒時宜居奪冠。

自5月14日，亞奧理事會宣布2018年雅加達亞運會的六個電子體育表演項目確定，分別是：《英雄聯盟》、《王者榮耀國際版（Arena of Valor）》、《皇室戰爭》、《實況足球2018》、《爐石傳說》和《星際爭霸2》。這是電競運動第一次真正的踏入亞運賽場，作為亞洲體育第一盛會，亞運會證明了主流社會對電競運動態度的轉變。

作為第一次進入亞運會的電競運動，我們的目標純粹而明確。在這次亞運會電競表演賽王者榮耀國際版（AoV）中，中國團隊從0開始到統治級別的表現一舉奪冠，不僅得到了國內外媒體的一致認可，更是在亞運會的舞臺上向全世界證明了中國電競的不俗實力。

《王者榮耀》是由騰訊天美工作室群獨立開發的5V5團隊公平競技手游。作為王者榮耀國際版（AoV），風靡全球范圍內多個國家，擁有超高的DAU。

中國電競團隊以冠軍表現在全世界面前競放中國力量，祝賀中國電競王者榮耀國際版（AoV）團隊的同時，期待明天英雄聯盟與皇室戰爭團隊的精彩發揮！

感謝騰訊視頻愛玩游戲頻道、騰訊游戲頻道、微視、QQ看點、小紅書、騰訊云對雅加達亞運會電子體育表演項目的支持，讓我們一起為中國團隊加油助威！

【關于騰訊電競】

騰訊電競，中國最具競爭力的電競品牌，騰訊電競業務從2010年以TGA開始布局，正式品牌成立于2016年底，是“新文創”數字內容產業矩陣重要組成。

如今，電競產業是既基于游戲又超越游戲的集科技、競技、娛樂、社交于一身，又擁有獨特商業屬性與用戶價值的數字娛樂文化體育產業。

2018年，騰訊電競將繼續從賽事到用戶與整體生態的多個層面為中國電競產業整體發展提供更多助力。

天朋友圈又火了，聽說原因是 @騰訊官網 就能得到一頂綠色的帽子，啊呸，是一個好看的國慶節頭像，可是聽說沒一會就502了，那么我們自己動手實現一個吧

由于代碼比較簡單就不一一介紹了。

var cvs=document.getElementById("cvs");
var ctx=cvs.getContext("2d");
var exportImage=document.getElementById("export");
var img=document.getElementById("img");
var hat="hat6";
var canvasFabric;
var hatInstance;
var screenWidth=window.screen.width < 500 ? window.screen.width : 300;
function viewer() {
 var file=document.getElementById("upload").files[0];
 console.log(file);
 var reader=new FileReader;
 if (file) {
 reader.readAsDataURL(file);
 reader.onload=function(e) {
 img.src=reader.result;
 img.onload=function() {
 img2Cvs(img)
 }
 }
 } else {
 img.src=""
 }
}
function img2Cvs(img) {
 cvs.width=img.width;
 cvs.height=img.height;
 cvs.style.display="block";
 canvasFabric=new fabric.Canvas("cvs", {
 width: screenWidth,
 height: screenWidth,
 backgroundImage: new fabric.Image(img, {
 scaleX: screenWidth / img.width,
 scaleY: screenWidth / img.height
 })
 });
 changeHat();
 document.getElementById("uploadContainer").style.display="none";
 document.getElementById("uploadText").style.display="none";
 document.getElementById("upload").style.display="none";
 document.getElementById("change").style.display="block";
 document.getElementById("exportBtn").style.display="block";
 document.getElementById("tip").style.opacity=1
}
function changeHat() {
 document.getElementById(hat).style.display="none";
 var hats=document.getElementsByClassName("hide");
 hat="hat" + (+hat.replace("hat", "") + 1) % hats.length;
 var hatImage=document.getElementById(hat);
 hatImage.style.display="block";
 if (hatInstance) {
 canvasFabric.remove(hatInstance)
 }
 hatInstance=new fabric.Image(hatImage, {
 top: 40,
 left: screenWidth / 3,
 scaleX: 100 / hatImage.width,
 scaleY: 100 / hatImage.height,
 cornerColor: "#0b3a42",
 cornerStrokeColor: "#fff",
 cornerStyle: "circle",
 transparentCorners: false,
 rotatingPointOffset: 30
 });
 hatInstance.setControlVisible("bl", false);
 hatInstance.setControlVisible("tr", false);
 hatInstance.setControlVisible("tl", false);
 hatInstance.setControlVisible("mr", false);
 hatInstance.setControlVisible("mt", false);
 canvasFabric.add(hatInstance)
}
function exportFunc() {
 document.getElementsByClassName("canvas-container")[0].style.display="none";
 document.getElementById("exportBtn").style.display="none";
 document.getElementById("tip").innerHTML="長按圖片保存或分享";
 document.getElementById("change").style.display="none";
 cvs.style.display="none";
 exportImage.style.display="block";
 exportImage.src=canvasFabric.toDataURL({
 width: screenWidth,
 height: screenWidth
 })
}

最后效果

拖動圖片可見已經拼合成一張完整圖片了

右鍵查看源代碼

所有圖片素材均來自騰訊官網

源碼地址：https://gitee.com/alterem/avatar.git

演示地址：http://alterem.gitee.io/avatar/

lt;h2 id="title1">列表標簽</h2>

<h3 id="title2">無序列表(unordered list)</h3>

• 作用: 給一堆內容添加無序列表語義(一個沒有先后順序整體), 列表中的條目是不分先后

• 格式:

• li 英文是 list item, 翻譯為列表項

 <h4>選擇居住城市(CN)</h4>
 <ul>
 <li>北京</li>
 <li>上海</li>
 <li>廣州</li>
 <li>鐵嶺</li>
 </ul>

• ul應用場景:

• 導航條

• 商品列表等

• 新聞列表

• 注意事項:

• 其實ul還有一個type屬性, 可以修改先導符號的樣式, 取值有disc、square、circle幾種

• 但是由于樣式將來都是通過css來完成, 所以這里就不給大家介紹了

• 這里指的無序是指對于主體來說內容沒有先后之分, 例如主題是"選擇居住城市(CN)"北京上海都是中國的城市, 無論誰放在前面它都還是中國的城市的. 如果標題改為"中國霧霾排行", 那么就必須有嚴格的排名,北京必須寫在前面

• 瀏覽器會給無需列表自動添加先導符號但是一定一定千萬千萬要記住, ul的作用并不是給文字添加小圓點, 而是增加無序列表的語義

• ul是一個組標簽, 一定是一坨一坨的出現, 也就是說li標簽不能單獨存在, 必須包裹在ul里面

• 由于ul和li是一個整體, 所以ul里面不推薦包裹其它標簽, 永遠記住ul里面最好只寫li標簽

• 雖然ul中推薦只能寫li標簽, 但是li標簽是一個容器標簽, li標簽中可以添加任意標簽, 甚至可以添加ul標簽

• 關注微信訂閱號：網頁設計輕松學
  

<ul>
 <li>
 好吃的 <ul>
 <li>牛奶</li>
 <li>面包</li>
 </ul>
 </li>
 <li>
 日用的 <ul>
 <li>毛巾</li>
 <li>牙膏</li>
 </ul>
 </li>
 </ul>

<h3 id="title3">有序列表(ordered list)</h3>

• 作用: 給一堆內容添加有序列表語義(一個有順序整體), 列表中的條目有先后之分

• 格式:

 <h4>中國房價排行</h4>
 <ol>
 <li>北京</li>
 <li>上海</li>
 <li>廣州</li>
 <li>鐵嶺</li>
 </ol>

• ol應用場景:

• xxx排行榜

• 其實ol應用場景并不多, 因為能用ol做的用ul都能做

• 注意事項:

• ol和ul就是語義不一樣，怎么使用都是一樣的以及注意點都一樣

• 其實ul還有兩個常見屬性start、type屬性, 可以修改先導符號的樣式和序號

• 但是由于樣式將來都是通過css來完成, 所以這里就不給大家介紹了

<h3 id="title4">定義列表(definition list)</h3>

• 作用: 給一堆內容添加列表語義, 通過dt羅列出列表的條目, 然后再通過dd給每個條目進行相應的描述

• 格式:

• dt英文definition title, 翻譯為定義標題

• dd英文definition description, 翻譯為定義描述信息

 <dl>
 <dt>北京</dt>
 <dd>國家的首都, 看升國旗的地方</dd>
 <dt>上海</dt>
 <dd>魔都, 遍地是黃金的地方</dd>
 </dl>

關注微信訂閱號：網頁設計輕松學

• dl應用場景:

• 網站底部相關信息

• 但凡看到一堆內容都是用于描述某一個內容的時候就要想到dl

• 注意事項:

  - dl是一個組標簽, 一定是一坨一坨的出現, 也就是說dt和dd標簽不能單獨存在, 必須包裹在dl里面

• 由于dl和dt、dd是一個整體, 所以dl里面不推薦包裹其它標簽

• dd和dt和li標簽一樣是容器標簽, 里面可以添加任意標簽

• 定義列表非常靈活, 可以給一個dt配置多個dd, 但是最好不要出現多個dt對應一個dd, dd的語義是描述離它最近的一個dt, 所以其它dt相當于沒有描述, 而定義列表存在的意義就是既可以列出每一個條目又可以對每一個條目進行描述

• 定義列表非常靈活, 可以將多個dt+dd組合拆分為多個dl