北京快3走式图:canvas绘制表情包的示例代码

  发布时间:2018-07-09 16:39:29   作者:立正小歪牙   我要评论

这篇文章主要介绍了canvas绘制表情包的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本文介绍了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);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • canvas里面如何基于随机点绘制一个多边形的方法

    这篇文章主要介绍了canvas里面如何基于随机点绘制一个多边形的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-13
  • 详解canvas在圆弧周围绘制文本的两种写法

    这篇文章主要介绍了详解canvas在圆弧周围绘制文本的两种写法,直接按弧度进行编写的,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-22
  • canvas绘制视频封面的方法

    这篇文章主要介绍了canvas绘制视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-05
  • HTML5 canvas基本绘图之绘制阴影效果

    <canvas></canvas>是HTML5中新增的标签,用于绘制图形,这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制阴影方法,感兴趣的小伙伴们可以参考一下
    2016-06-27
  • HTML5 canvas基本绘图之绘制曲线

    <canvas></canvas>是HTML5中新增的标签,用于绘制图形,这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制曲线方法,感兴趣的小伙伴们可以参考一下
    2016-06-27
  • HTML5 canvas基本绘图之绘制线条

    <canvas></canvas>是HTML5中新增的标签,用于绘制图形,这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制线条方法,感兴趣的小伙伴们可以参考一下
    2016-06-27
  • HTML5 canvas基本绘图之绘制五角星

    <canvas></canvas>是HTML5中新增的标签,用于绘制图形,这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制五角星方法,感兴趣的小伙伴们可以参考一下
    2016-06-27
  • HTML5 canvas基本绘图之绘制矩形

    <canvas></canvas>是HTML5中新增的标签,用于绘制图形,这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制矩形方法,感兴趣的小伙伴们可以参考一下
    2016-06-27
  • HTML5 canvas基本绘图之绘制线段

    <canvas></canvas>是HTML5中新增的标签,用于绘制图形,这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制线段方法,感兴趣的小伙伴们可以参考一下
    2016-06-27
  • html5 canvas绘制矩形和圆形的实例代码

    下面小编就为大家带来一篇html5 canvas绘制矩形和圆形的实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起公司小编过来看看吧
    2016-06-16

最新评论

  • 黄坤明会见澳门新闻界高层访京团 2018-12-16
  • 你把我抱紧 我帮你扶伞 2018-12-16
  • 最高人民法院首次发布禁毒工作白皮书 2018-12-15
  • 高考背后,他们默默付出(组图)【3】 2018-12-15
  • 一家人写14万字介绍白云山花草 2018-12-14
  • 正定--河北频道--人民网 2018-12-14
  • 北京工业大学:突出‘京味’、体现‘京韵’,加快世界一流大学和一流学科建设 2018-12-13
  • 把握和传承好“变则通”思想(大家手笔) 2018-12-12
  • 英国歌手世界杯开幕比不雅手势 恐遭逮捕并罚款5万 2018-12-11
  • 一图到底3分钟读懂上合峰会医疗保障,为何青睐这里 2018-12-11
  • 白岩松康辉撒贝宁欧阳夏丹 揭秘央视主播成功秘诀 2018-12-10
  • 女足热身不敌美国队 队员总结收获多 2018-12-09
  • 只要等一等就能多“等”出8600万美元! 2018-12-08
  • 中国人打仗?被逗了。独生子一代、捧在手里长大的90后00后、站在甲板上飒爽英姿、硝烟战火血肉横飞的场景、会失去行动能力的。这不是耸人听闻。 2018-12-08
  • 为生活外出奔波,留守老人与儿童,两地居住是租还是建? 2018-12-07
  • 205| 488| 151| 905| 141| 829| 840| 158| 521| 853|