月26日今天晚上，第18届亚运会电竞表演赛王者荣耀国际版（AoV）决赛刚刚结束，中国团队以仅失1小局的赛绩，为中国电竞团队摘下2018雅加达亚运会电竞表演赛首金，这是电竞首次进入亚运会，中国团队在这个历史时刻拿下了赛会首金。

为了拿到一个冠军，这次需要靠“你”了！扫二维码进入“少年！这一次亚运需要你！！”生成专属的夺金时刻！

当五星红旗第一次飘扬在亚运电竞赛场上的时候，相信这一刻会被永远载入史册。

北京时间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