canvas绘制表情包的示例代码


Posted in HTML / CSS onJuly 09, 2018

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

制作表情包

canvas绘制表情包的示例代码

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);

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

HTML / CSS 相关文章推荐
CSS3 网页下拉菜单代码解释 中文翻译
Feb 27 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
CSS3 实现的加载动画
Dec 07 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
Dec 16 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
amazeui页面校验功能的实现代码
Aug 24 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 #HTML / CSS
详解Html5微信支付爬坑之路
Jul 24 #HTML / CSS
基于Html5实现的react拖拽排序组件示例
Aug 13 #HTML / CSS
基于HTML5的WebSocket的实例代码
Aug 15 #HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 #HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 #HTML / CSS
Html5页面在微信端的分享的实现方法
Aug 30 #HTML / CSS
You might like
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
php实现的递归提成方案实例
2015/11/14 PHP
php json相关函数用法示例
2017/03/28 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
python 全局变量的import机制介绍
2017/09/07 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
车贷收入证明范本
2014/01/09 职场文书
业务员岗位职责
2015/02/03 职场文书
大学生团员个人总结
2015/02/14 职场文书
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript