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 相关文章推荐
js window.event对象详尽解析
Feb 17 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
jQuery中需要注意的细节问题小结
Dec 06 Javascript
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
jQuery mobile 移动web(6)
Dec 20 Javascript
获取url中用&amp;隔开的参数实例(分享)
May 28 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
JavaScript实现连连看连线算法
Jan 05 Javascript
基于layui内置模块(element常用元素的操作)
Sep 20 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
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
15种PHP Encoder的比较
2007/04/17 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
javascript中parentNode,childNodes,children的应用详解
2013/12/17 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
python语言使用技巧分享
2016/05/31 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
浅析Python3爬虫登录模拟
2018/02/07 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
python装饰器练习题及答案
2019/11/01 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
JAVA高级程序员面试题
2013/09/06 面试题
化工工艺设计求职信
2014/06/25 职场文书
励志演讲稿200字
2014/08/21 职场文书
2015年人事科工作总结
2015/04/28 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
初中数学课堂教学反思
2016/02/17 职场文书