当前位置:手机游戏 > 手游资讯 > 新手问答 > 微信官方国旗(【JavaScript】"给我一面国旗@微信官方"别再@微信官方啦,应该这样玩)

微信官方国旗(【JavaScript】"给我一面国旗@微信官方"别再@微信官方啦,应该这样玩)

作者:哪吒游戏网 来源:哪吒游戏网 2020-05-15 10:23:42

微信官方国旗(【JavaScript】"给我一面国旗@微信官方"别再@微信官方啦,应该这样玩),哪吒游戏网给大家带来详细的微信官方国旗(【JavaScript】"给我一面国旗@微信官方"别再@微信官方啦,应该这样玩)介绍,大家可以阅读一下,希望这篇微信官方国旗(【JavaScript】"给我一面国旗@微信官方"别再@微信官方啦,应该这样玩)可以给你带来参考价值。

html+js给自己的头像画上国旗

1.技术点:

html(主要是canvas)、css、js

2.实现思路

利用html的Canvas的drawImage画图片,然后导出

3.实现步骤

1.创建项目

1.目录格式

|—image(项目名)

|——css

|——img

|——js

|——index.html

2.html代码

首先创建一个canvas容器用来画图

然后一个上传按钮和一个玩法攻略介绍按钮微信官方国旗,用来与用户交互

再来一个input file用来上传图片(需设置accept,让用户只能选择图片)

html

html

3.css代码

设置按钮样式和将input file隐藏

css

css

4.js代码

1.编写downLoad函数,用于玩法攻略介绍图片

原理就是动态创建一个a元素,将图片路径赋值给href,并设置download属性,将元素追加到页面然后触发点击事件再删除元素

玩法攻略介绍函数

下载函数

2.操作canvas元素

首先获取canvas元素微信官方国旗,然后获取上下文

再编写绘制函数(因为需要多次调用)

使用new Image对象加载图片

加载成功后通过drawImage画图片

canvas

canvas

3.获取按钮以及input file元素

获取按钮元素

获取按钮元素

4.给两个按钮添加事件监听器,监听click事件

点击上传按钮时通过uploadfile.click();触发input file 的点击事件

点击玩法攻略介绍按钮时调用downLoad函数

按钮事件

按钮事件

5.给input file添加事件监听器,监听change事件

使用FileReader读取上传的文件

读取成功后调用draw方法绘制图片

文件上传

文件上传

5.效果图

效果图

效果图

6.其他附件

/img/1.png--国旗图片

/img/1.psd--国旗ps格式文件

/img/2.jpg--测试头像

/js/jquery-3.4.1.min.js--jquery(暂时没有用到)

7.其他说明

大家使用国旗头像表达爱国热情是不违法的,但根据《中华人民共和国国旗法》第十九条:“在公共场合故意以焚烧、毁损、涂划、玷污、践踏等方式侮辱中华人民共和国国旗的,依法追究刑事责任;情节较轻的,参照治安管理处罚条例的处罚规定,由公安机关处以十五日以下拘留。”大家在使用这面“小国旗”时,还要注意微信头像和微信账号本身是否含有不合法的、侮辱性等内容。如果将国旗图案贴在淫秽、色情或其他侮辱性图片及字眼上时,就肯定是违法的了。

8.源码

链接: 提取码: xqg8

没有解压密码(mac电脑的压缩不知道怎么加密码)

总结:以上内容就是针对微信官方国旗(【JavaScript】"给我一面国旗@微信官方"别再@微信官方啦,应该这样玩)详细阐释,如果您觉得有更好的建议可以提供给哪吒游戏网小编,微信官方国旗(【JavaScript】"给我一面国旗@微信官方"别再@微信官方啦,应该这样玩)部分内容转载自互联网,有帮助可以收藏一下。



上一篇: 戈罗克(魔兽世界怀旧服土灵的觉醒任务玩法详解攻略)

下一篇: 微信官方国旗(@微信官方要国旗的,你是认真的吗?)

本文标签:
猜你喜欢