江苏快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

最新评论

  • 中共中央直属机关党校 2019-04-21
  • 全国自由搏击锦标赛落下帷幕 2019-04-20
  • 近来人民网强国社区的评论少了很多,那是因为人们反映事实存在的问题,绝大多数都是说了等于白说,于是渐渐地失望了,渐渐地越来越多的人“算了,不说了!” 2019-04-19
  • 热巴窦骁携手演绎经典神话 2019-04-19
  • 神奇!沈阳现3D稻田画 2019-04-18
  • 中国和巴基斯坦将合拍电影《天路》 2019-04-18
  • 电视剧抱团出海 又有哪些作品走出了国门 2019-04-17
  • 谈判与加关税的不同在于,后者没有给小左唱赞歌的机会 2019-04-16
  • 全世界人民都要顺应人类社会发展规律,不断扩大社会财富公有制的范围,不断缩小社会财富私有制的范围,以便最终消灭社会财富私有制,建立共产主义社会财富公有制。 2019-04-15
  • 新时代·新征程十九大精神在基层---“各地聚焦”--湖南频道--人民网 2019-04-14
  • 首部由中国人翻译的120回《三国演义》问世 2019-04-14
  • 2022年冬奥会筹备进行时 2019-04-13
  • 牙膏的10个超实用功能 速收藏 2019-04-13
  • 新华保险荆州中支助力首届荆楚文化旅游节开幕 2019-04-12
  • 未来十天 山西以对流性天气为主 多阵性降水 2019-04-12
  • 346| 377| 214| 543| 699| 775| 704| 274| 306| 13|