帝王谷资源网 Design By www.wdxyy.com
本文介绍了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,绘制,表情包
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
更新日志
2024年07月03日
2024年07月03日
- 《逸剑风云决》新坐骑解锁条件
- 《幻兽帕鲁》新增技能果实介绍
- 《原神》4.7飞迸湍流二重奏活动介绍
- 谢宇威1995-《直到现在我还不明白我是唯一的借口》台湾首版[WAV+CUE]
- 尚雯婕2012-最后的赞歌2CD[华谊兄弟][FLAC+CUE]
- 常石磊2010-自己[风向乐动][WAV+CUE]
- 玩家吐槽索尼第一方:15家工作室11家不知道新作是啥
- 曾在韩国爆火的糖葫芦遇冷 韩国糖葫芦店接连倒闭
- 清凉一夏!《妮姬》官方发布各角色迷人泳装视频
- 群星.2008-梦想的翅膀2CD【种子音乐】【WAV+CUE】
- 林良乐.2005-辉煌全记录2辑【乡城】【WAV+CUE】
- 林忆莲.2016-陪着我走【环球】【WAV+CUE】
- 原画壁纸及美图第259期,无水印可自取
- 原画壁纸及美图第260期,无水印可自取
- 原画壁纸及美图第261期,无水印可自取