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 相关文章推荐
改写一个简单的菜单 弹性大小
Dec 02 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
再谈JavaScript线程
Jul 10 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
关于vue.js弹窗组件的知识点总结
Sep 11 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
canvas实现图像布局填充功能
Feb 06 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 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
Access数据库导入Mysql的方法之一
2006/10/09 PHP
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
php生成shtml类用法实例
2014/12/09 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
vue a标签点击实现赋值方式
2020/09/07 Javascript
浅谈Python中数据解析
2015/05/05 Python
python采集百度百科的方法
2015/06/05 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
python基本语法练习实例
2017/09/19 Python
基于python的字节编译详解
2017/09/20 Python
python实现简易通讯录修改版
2018/03/13 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
python读取中文txt文本的方法
2018/04/12 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
聚网科技C++面试笔试题
2015/09/01 面试题
最新远光软件笔试题面试题内容
2013/11/08 面试题
医药营销专业个人自荐信
2013/09/29 职场文书
鸿星尔克广告词
2014/03/21 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python