В этой статье представлен пример кода для рисования смайлов на холсте, а подробности приведены ниже:
Нарисовать мультяшный смайлик
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, Матем.ПИ, Матем.ПИ*2, true);context.closePath();context.fill();//Нарисуйте румянец, установите цвет линии румянца на «розовый», а ширину линии — на 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('Все такой же красивый!', 20, 90) );Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.