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

微信官方国旗(【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

3.css代码

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

css

4.js代码

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

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

玩法攻略介绍函数

2.操作canvas元素

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

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

使用new Image对象加载图片

加载成功后通过drawImage画图片

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】＂给我一面国旗@微信官方＂别再@微信官方啦，应该这样玩)部分内容转载自互联网，有帮助可以收藏一下。