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 相关文章推荐
jquery $.getJSON()跨域请求
Dec 21 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
javascript中闭包概念与用法深入理解
Dec 15 Javascript
js将键值对字符串转为json字符串的方法
Mar 30 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
Feb 16 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 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操作MongoDB类实例
2015/06/17 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
ext form 表单提交数据的方法小结
2008/08/08 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
常用的9个JavaScript图表库详解
2017/12/19 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
node.js域名解析实现方法详解
2019/11/05 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
[02:15]2014DOTA2国际邀请赛 赛后退役选手回顾
2014/08/01 DOTA
python实现sublime3的less编译插件示例
2014/04/27 Python
Python编码类型转换方法详解
2016/07/01 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
Python多分支if语句的使用
2020/09/03 Python
python操作toml文件的示例代码
2020/11/27 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
万年牢教学反思
2014/02/15 职场文书
元旦晚会主持词
2014/03/24 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
Python常遇到的错误和异常
2021/11/02 Python