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