Cet article présente l'exemple de code pour dessiner des émoticônes sur toile et le partage avec tout le monde. Les détails sont les suivants :
Dessiner un visage souriant de dessin animé
var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');//Dessinez un visage et définissez la couleur de remplissage du visage sur '#fff'context.fillStyle = '#fff' ;context.beginPath();context.arc(150, 150, 60, 0, Math.PI*2);context.closePath();context.fill();//Dessinez les yeux et définissez la couleur de remplissage des yeux sur '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();// Dessinez la bouche et définissez la couleur de remplissage de la bouche sur '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();//Dessinez du blush, définissez la couleur de la ligne de blush sur « rose » et la largeur de la ligne sur 5context.beginPath();context.moveTo(95, 152); contexte .lineTo(110, 150);context.moveTo(190, 150);context.lineTo(205, 152);context.closePath();context.lineWidth = 5;context.StrokeStyle = 'pink';context.Stroke();Créer des émoticônes
var canvas = document.getElementById('canvas');var contexte = 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('Aujourd'hui c'est moi', 20, 50);context.font = '40px arial';context.fillText('Toujours aussi beau !', 20 , 90 );Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.