扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
使用canvas怎么绘制一个表情包?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
创新互联建站是一家专注于成都做网站、成都网站设计与策划设计,德宏州网站建设哪家好?创新互联建站做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:德宏州等地区。德宏州做网站价格咨询:13518219792
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怎么绘制一个表情包的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流