canvas绘制一个常用的emoji表情


Posted in Javascript onMarch 30, 2017

效果图:

canvas绘制一个常用的emoji表情

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>装逼表情</title>
 <meta name="viewport" content="initial-scale=1, maximum-scale=1">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<style type="text/css">
 *{
 margin: 0;
 padding: 0;
 }
 body{
  overflow:hidden;
 }
 canvas{
 /*background: #000;*/
 /*opacity: 0.5;*/
 }
</style>
<body>
 <canvas id="canvas"></canvas>
</body>
<script type="text/javascript">
(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')
</script>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
js滚动条多种样式,推荐
Feb 05 Javascript
JScript内置对象Array中元素的删除方法
Mar 08 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
js前端面试题及答案整理(一)
Aug 26 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 Javascript
django中使用vue.js的要点总结
Jul 07 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 Javascript
vue中是怎样监听数组变化的
Oct 24 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 #Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 #Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 #Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 #Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 #Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 #Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 #Javascript
You might like
php empty()与isset()区别的详细介绍
2013/06/17 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
简单谈谈python中的多进程
2016/11/06 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
python线程池threadpool实现篇
2018/04/27 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
python把1变成01的步骤总结
2019/02/27 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
python中p-value的实现方式
2019/12/16 Python
python画环形图的方法
2020/03/25 Python
python exit出错原因整理
2020/08/31 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
HTML5未来发展趋势
2016/02/01 HTML / CSS
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
Sony C++笔试题
2013/03/10 面试题
留学推荐信范文
2014/05/10 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
2014年共青团工作总结
2014/12/10 职场文书
教师年终个人总结
2015/02/11 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
js Proxy的原理详解
2021/05/25 Javascript
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python