北京快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-02-18
  • 不是“不尊重公投”,而是不尊重人类社会发展规律就是不尊重人类。 2019-02-18
  • 学习宣传贯彻习近平新时代中国特色社会主义思想系列研讨会第三场研讨会发言摘编 2019-02-17
  • 新能源汽车纳入蚌埠市级政府集中采购目录 2019-02-16
  • 北京:走进高考阅卷现场 2019-02-15
  • 环球 —频道 春城壹网 七彩云南 一网天下 2019-02-15
  • 合肥市庐阳中学启动“教师成长工程” 2019-02-14
  • 美国八旬教授 太原免费教英语 2019-02-14
  • 安徽省投资集团控股有限公司 2019-02-13
  • 新疆维吾尔自治区交通运输厅 2019-02-12
  • 中国对外投资连续7个月增长 “一带一路”相关国家投资成亮点 2019-02-12
  • 永葆中国共产党人奋斗精神 2019-02-11
  • 我们的节日2018端午——华龙网 2019-02-10
  • 李鹏国的行为是对善良的一种打击,暴露了资本主义的道貌岸然的虚伪本质,女白领的同情心是值得赞扬的,只有不够,没有毛病 2019-02-10
  • 三只央企结构调整ETF 及联接基金获批 2019-02-09
  • 560| 520| 672| 466| 269| 229| 819| 401| 994| 29|