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实现表单验证效果(非常不错)
Jan 18 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 HTML / CSS
HTML5拖拽功能实现的拼图游戏
Jul 31 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 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常用函数列表(分享)
2013/06/07 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
获取body标签的两种方法
2011/10/13 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
document.createElement()用法
2013/03/13 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
python的正则表达式re模块的常用方法
2013/03/09 Python
python实现百万答题自动百度搜索答案
2018/01/16 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
Python读写锁实现实现代码解析
2020/11/28 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
学生自我评语大全
2014/04/18 职场文书
js实现自动锁屏功能
2021/06/02 Javascript
OpenCV实现反阈值二值化
2021/11/17 Java/Android
Python中第三方库Faker的使用详解
2022/04/02 Python
Java使用HttpClient实现文件下载
2022/08/14 Java/Android