Este artículo presenta el código de muestra para dibujar emoticones en un lienzo y lo comparte con todos. Los detalles son los siguientes:
Dibujar cara sonriente de dibujos animados
var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');//Dibuja una cara y establece el color de relleno de la cara en '#fff'context.fillStyle = '#fff' ;contexto.comenzarRuta();context.arc(150, 150, 60, 0, Math.PI*2);context.closePath();context.fill();//Dibuja los ojos y establece el color de relleno de los ojos en '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();// Dibuja la boca y establece el color de relleno de la boca en 'rgba(255, 0, 0, 0.8)'context.fillStyle = 'rgba(255, 0, 0, 0.8)';context.beginPath();context.arc (150, 160, 25, Matemáticas.PI, Matemáticas.PI*2, true);context.closePath();context.fill();//Dibuja el rubor, establece el color de la línea del rubor en 'rosa' y el ancho de la línea en 5context.beginPath();context.moveTo(95, 152); contexto .lineTo(110, 150);context.moveTo(190, 150);context.lineTo(205, 152);context.closePath();context.lineWidth = 5;context.strokeStyle = 'rosa';context.stroke();hacer emoticones
var lienzo = document.getElementById('canvas');var contexto = lienzo.getContext('2d');var imagen = nueva Imagen();image.src= 'https://ke.qq.com/classroom/assets /lib/img/canvas-expression-base.png';image.onload = function(){ contexto.drawImage(imagen, 50, 110, 200, 200);}context.font = '30px arial';context.fillText('Hoy soy yo', 20, 50);context.font = '40px arial';context.fillText('¡Aún igual de guapo!', 20, 90 );Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.