当前位置： 移动技术网 > IT编程>开发语言>JavaScript > canvas绘制一个常用的emoji表情

canvas绘制一个常用的emoji表情

2019年06月09日  | 移动技术网IT编程  | 我要评论

效果图：

代码如下：

<!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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持移动技术网！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网