本文介紹了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, 0.8)';context.beginPath();context.arc(150, 160, 25, Math.PI, Math.PI*2, true);context.closePath();context.fill();// 畫腮紅,設定腮紅線條顏色為'pink',線條寬度為5context.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('還是一樣的帥！以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。