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教程(2):网页边框半径和网页圆角
Apr 02 HTML / CSS
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
CSS3实现的文本3D效果附图
Sep 03 HTML / CSS
CSS3 边框效果
Nov 04 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
May 11 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
Jan 31 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
Html5应用程序缓存(Cache manifest)
Jun 04 HTML / CSS
Canvas图片分割效果的实现
Jul 29 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
Nov 04 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 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
MVC模式的PHP实现
2006/10/09 PHP
Smarty分页实现方法完整实例
2016/05/11 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
vue子路由跳转实现tab选项卡
2019/07/24 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
Python验证码识别处理实例
2015/12/28 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
python用什么编辑器进行项目开发
2020/06/17 Python
python如何提升爬虫效率
2020/09/27 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
事业单位分类改革实施方案
2014/03/21 职场文书
企业宣传标语
2014/06/09 职场文书
精神文明建设标语
2014/06/16 职场文书
公司仓库管理制度
2015/08/04 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP