canvas绘制一个常用的emoji表情
程序员文章站
2024-02-07 23:32:28
效果图：
代码如下：
效果图：
代码如下：
<!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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！