用html代码制作一个表情图片,canvas绘制一个常用的emoji表情
效果图:
代码如下:
装逼表情
*{
margin: 0;
padding: 0;
}
body{
overflow:hidden;
}
canvas{
/*background: #000;*/
/*opacity: 0.5;*/
}
(function(win,el){
var canvas = document.querySelector(el),
ctx = canvas.getContext('2d');
canvas.width = win.innerWidth;
canvas.height = win.innerHeight;
ctx.translate(canvas.width/2,canvas.height/2);//将画布移到屏幕中心
// 绘制圆形头部
ctx.beginPath();
var grd=ctx.createLinearGradient(0,-100,0,100);
grd.addColorStop(0,'#FDF390');
grd.addColorStop(1,'#B97814');
ctx.fillStyle = grd;
ctx.strokeStyle = '#A86B14';
ctx.lineWidth = 5;
ctx.arc(0,0,100,0,2*Math.PI);
ctx.fill();
ctx.stroke();
//嘴巴
ctx.beginPath();
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.fillStyle = '#754800';
ctx.strokeStyle = '#935B06';
ctx.moveTo(-63,-2);
ctx.quadraticCurveTo(-37,90,49,46);
ctx.lineTo(-63,-2);
ctx.fill();
ctx.stroke();
// 牙齿
ctx.beginPath();
ctx.lineWidth = 8;
ctx.strokeStyle = '#FFF';
ctx.moveTo(-58,6);
ctx.lineTo(38,47);
ctx.stroke();
// 眼泪左
ctx.beginPath();
var yanlei = ctx.createLinearGradient(-48,-48,-97,30);
yanlei.addColorStop(0,'#90C1C8');
yanlei.addColorStop(1,'#5394C8');
var yanleib = ctx.createLinearGradient(-48,-48,-97,30);
yanleib.addColorStop(0,'#7CAEA7');
yanleib.addColorStop(1,'#245F6A');
ctx.strokeStyle = yanleib;
ctx.fillStyle = yanlei;
ctx.moveTo(-56,-37);
ctx.lineTo(-96,25);
ctx.quadraticCurveTo(-90,50,-82,56);
ctx.lineTo(-29,-27);
ctx.stroke();
ctx.fill();
// 眼泪右
ctx.beginPath();
var yanlei = ctx.createLinearGradient(-48,-48,-97,30);
yanlei.addColorStop(0,'#90C1C8');
yanlei.addColorStop(1,'#5394C8');
ctx.strokeStyle = yanleib;
ctx.fillStyle = yanlei;
ctx.moveTo(33,35);
ctx.lineTo(34,91);
ctx.quadraticCurveTo(55,88,55,78);
ctx.lineTo(53,44);
ctx.stroke();
ctx.fill();
// 眼睛
ctx.beginPath();
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.lineWidth = 5;
ctx.fillStyle = '#714801';
ctx.strokeStyle = '#714801'
ctx.moveTo(-58,-39);
ctx.quadraticCurveTo(-32,-41,-25,-27);
ctx.quadraticCurveTo(-42,-36,-58,-39);
ctx.fill();
ctx.stroke();
// 麒麟臂
ctx.beginPath();
var qlgrd=ctx.createRadialGradient(30,-19,5,30,-19,60);
qlgrd.addColorStop(0,'#F7D25F');
qlgrd.addColorStop(1,'#EEB63B');
ctx.lineWidth = 5;
ctx.strokeStyle = '#CE7F12';
ctx.fillStyle = qlgrd;
ctx.moveTo(78,87);
ctx.quadraticCurveTo(100,74,81,-19);
ctx.quadraticCurveTo(68,-45,49,-39);
ctx.quadraticCurveTo(59,-35,59,-26);
ctx.quadraticCurveTo(36,-62,-10,-59);
ctx.quadraticCurveTo(-14,-55,-9,-50);
ctx.quadraticCurveTo(18,-48,33,-26);
ctx.quadraticCurveTo(0,-54,-28,-48);
ctx.quadraticCurveTo(-37,-42,-28,-33);
ctx.quadraticCurveTo(-1,-37,19,-15);
ctx.quadraticCurveTo(-5,-37,-34,-28);
ctx.quadraticCurveTo(-36,-21,-27,-18);
ctx.quadraticCurveTo(-13,-17,11,2);
ctx.quadraticCurveTo(-10,-15,-27,-11);
ctx.quadraticCurveTo(-30,-6,-24,1);
ctx.lineTo(1,12);
ctx.quadraticCurveTo(7,29,41,42);
ctx.quadraticCurveTo(43,63,52,81);
ctx.quadraticCurveTo(64,92,78,87);
ctx.stroke();
ctx.fill();
})(window,'#canvas')
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
用html代码制作一个表情图片,canvas绘制一个常用的emoji表情相关推荐
- Canvas绘制一个时钟
Canvas绘制一个时钟 Canvas:一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处 ...
- 使用canvas 绘制一个有限度的斐波那契数列的曲线
昨天看到"前端面试中的常见的算法问题"的一篇文章,感觉有点挑战,所以才要实现使用canvas 绘制一个有限度的斐波那契数列的曲线,刚开始真是想破脑袋也实现不了,被下图中交接的线条搞 ...
- 用canvas绘制一个圆形,实现绕着一个中心运动
实现效果 使用canvas绘制一个圆形,实现绕着一个中心,轨迹类似于走一个椭圆的轨迹那样路线,并且实现漂浮的效果. 这里只是一个实例Demo,直接运行就可以,下面附上代码: <!doctype ...
- html页面画一个矩形,使用HTML5 canvas绘制一个矩形的方法
使用HTML5 canvas绘制一个矩形的方法 发布时间:2020-08-29 11:23:12 来源:亿速云 阅读:102 作者:小新 这篇文章将为大家详细讲解有关使用HTML5 canvas绘制一 ...
- canva五角星空html,使用canvas绘制一个五角星
一.了解canvas canvas 是HTML5新增的元素,用于在网页上绘制图形.但 canvas 只是图形的容器,必须要通过脚本(通常是JavaScript)来绘制图形. 可以通过多种方法使用can ...
- 使用canvas绘制一个动态的表盘
使用canvas绘制一个动态的表盘 技术要求 需要一点点数学基础 需要对 canvas 的常见的方法熟悉 一点点数学基础 角度转弧度的计算公式 canvas 常见的方法 菜鸟教程 扬帆起航 首先创建一 ...
- 如何用计算机打出表情包,电脑的输入法怎么打出emoji表情?好玩又有趣的emoji输入...
线上交流经常会用到有趣的emoji表情,手机上的输入法会有很多好玩的emoji表情,那在电脑上如何输入emoji表情呢?下面就借用电脑上的输入法来了解一下. 金山打字通采用过关斩将形式,让初学者可循序 ...
- java后台处理APP表情-使用轻量工具emoji-java处理emoji表情字符
目录 pom依赖 java工具类 测试 Java Url编码转换 在APP开发中,大多需要涉及表情符号丰富APP,但是因为我们的数据库一般是utf8编码,是3个字节,而表情符号基本都是四个字节的uni ...
- php代码画表情包,canvas绘制表情包的示例代码
本文介绍了canvas绘制表情包的示例代码,分享给大家,具体如下: 绘制卡通笑脸 var canvas = document.getElementById('canvas'); var context ...
最新文章
- 如何写一个简单的node.js C 扩展
- day24 反射\元类
- [leetcode sort]56. Merge Intervals
- Jupyter Lab——如何在 Jupyter Lab调用相对路径的文件夹中的类
- eclipse New菜单项的显示问题
- Django-----中间件Cookie
- 安装Exchange2010的详细步骤
- pku 1276 Cash Machine 多重背包
- hdp对应hadoop的版本_查看Hadoop组件版本
- JAVA基础篇——JAVA运行环境(JDK、JRE、JVM)
- 从Controller注解切入了解spring注解原理
- 计算机系统的基础必备软件,电脑必装软件推荐:基础篇——够用就行
- 高斯基函数线性组合回归练习——sklearn库高斯过程回归
- 怎html样在图片两边加上空白,怎样在博客两边空白处加上自己喜欢的图片?
- CSS的文本属性阴影效果
- vi两个文件之间复制
- ffmpeg 提取 视频,音频,字幕 方法
- 《pyMail.py》使用说明
- 物联网专科专业必修课程_物联网专业大专课程 物联网工程学什么
- localStroage
热门文章
- 特殊符号(一)—反斜杠 ” \ “(旋转光标和倒计时的实现)
- Android 超简单音乐播放器(九)搜索网络歌曲,获得热门榜单(GridView)(易源api的使用)(JSON的解析)(刷新)
- JAVA毕业设计Vue网上书籍购买商城登录计算机源码+lw文档+系统+调试部署+数据库
- mysql数据库BKA算法详解
- 数据模型是什么,有哪些常见的分析方法? 财务、人力、运营等数据分析人士必看!(内附2000+套数据可视化模版)
- 黑马程序员——OC语言------类的声明实现、面向对象
- 滑块拖动验证码智能识别验证码技术(持续更新)
- Linux常用命令以及vim的使用
- 使用wxLog实现循环保存日志的解决方案(附详细代码)—— 定时执行专家
- 程序员宅男干货福利!手把手教你获取上千张cosplay小姐姐的美照