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);