이번 글에서는 캔버스에 이모티콘을 그리는 샘플 코드를 소개하고, 자세한 내용은 다음과 같습니다.
만화 웃는 얼굴 그리기
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();//홍당무를 그리고 홍당무 선 색상을 '분홍색'으로 설정하고 선 너비를 5context.beginPath();context.moveTo(95, 152); 컨텍스트 .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(이미지, 50, 110, 200, 200);}context.font = '30px arial';context.fillText('오늘의 나', 20, 50);context.font = '40px arial';context.fillText('아직도 잘생겼어요!', 20 , 90 );위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.