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动画效果
Aug 14 HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 HTML / CSS
html5的localstorage详解
May 09 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
Mar 15 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 HTML / CSS
CSS 圆形进度栏
Apr 06 HTML / CSS
详解盒子端CSS动画性能提升
May 24 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 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
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
了解在JavaScript中将值转换为字符串的5种方法
2019/06/06 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
python二分法实现实例
2013/11/21 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
伦敦一卡通:The London Pass
2018/11/30 全球购物
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
新闻专业推荐信范文
2013/11/20 职场文书
个人现实表现材料
2014/02/04 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript