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 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
flash 得到自身url参数的代码
Nov 15 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
ReactJs设置css样式的方法
Jun 08 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
微信小程序如何获取用户手机号
Jan 26 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
Node.js net模块功能及事件监听用法分析
Jan 05 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
JavaScript parseInt0.0000005打印5原理解析
Jul 23 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 zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
Windows下安装Memcached的步骤说明
2010/04/25 PHP
遍历指定目录下的所有目录和文件的php代码
2011/11/27 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
2019/08/27 PHP
动手学习无线电
2021/03/10 无线电
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
python中的多线程实例教程
2014/08/27 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
Python命令行解析模块详解
2018/02/01 Python
Python多线程扫描端口代码示例
2018/02/09 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
python使用KNN算法识别手写数字
2019/04/25 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
小学安全工作总结2015
2015/05/18 职场文书
离婚纠纷代理词
2015/05/23 职场文书