- 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);
来源: http://www.jianshu.com/p/ac385fc1ebd3