当前位置： 移动技术网 > IT编程>网页制作>Html5 > canvas绘制表情包的示例代码

canvas绘制表情包的示例代码

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

本文介绍了canvas绘制表情包的示例代码，分享给大家，具体如下：

绘制卡通笑脸

var canvas = document.getelementbyid('canvas');
var context = canvas.getcontext('2d');
// 画脸,设置脸的填充颜色为 '#fff'
context.fillstyle = '#fff';
context.beginpath();
context.arc(150, 150, 60, 0, math.pi*2);
context.closepath();
context.fill();
// 画眼睛,设置眼睛的填充颜色为 'rgb(0, 0, 0)'
context.fillstyle = 'rgb(0, 0, 0)';
context.beginpath();
context.arc(130, 130, 8, 0, math.pi*2);
context.closepath();
context.fill();
context.fillstyle = 'rgb(0, 0, 0)';
context.beginpath();
context.arc(170, 130, 8, 0, math.pi*2);
context.closepath();
context.fill();
// 画嘴巴,设置嘴巴的填充颜色为 'rgba(255, 0, 0, 0.8)'
context.fillstyle = 'rgba(255, 0, 0, 0.8)';
context.beginpath();
context.arc(150, 160, 25, math.pi, math.pi*2, true);
context.closepath();
context.fill();
// 画腮红,设置腮红线条颜色为 'pink',线条宽度为 5
context.beginpath();
context.moveto(95, 152);
context.lineto(110, 150);
context.moveto(190, 150);
context.lineto(205, 152);
context.closepath();
context.linewidth = 5;
context.strokestyle = 'pink';
context.stroke();

制作表情包

var canvas = document.getelementbyid('canvas');
var context = canvas.getcontext('2d');
var image = new image();
image.src= 'https://ke.qq.com/classroom/assets/lib/img/canvas-expression-base.png';
image.onload = function(){
  context.drawimage(image, 50, 110, 200, 200);
}
context.font = '30px arial';
context.filltext('今天的我', 20, 50);
context.font = '40px arial';
context.filltext('还是一样的帅！', 20, 90);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

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

相关文章:

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