Artikel ini memperkenalkan contoh kode untuk menggambar emotikon di kanvas dan membagikannya kepada semua orang. Detailnya adalah sebagai berikut:
Menggambar kartun wajah tersenyum
var canvas = document.getElementById('canvas');var konteks = canvas.getContext('2d');//Gambar wajah dan atur warna isian wajah menjadi '#fff'context.fillStyle = '#fff' ;konteks.beginPath();context.arc(150, 150, 60, 0, Math.PI*2);context.closePath();context.fill();//Gambar mata dan atur warna isian mata menjadi '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, Matematika.PI*2);context.closePath();context.fill();// Gambar mulutnya dan atur warna isian mulutnya menjadi 'rgba(255, 0, 0, 0.8)'context.fillStyle = 'rgba(255, 0, 0, 0.8)';context.beginPath();context.arc (150, 160, 25, Matematika.PI, Matematika.PI*2, true);context.closePath();context.fill();//Gambar perona pipi, atur warna garis perona pipi menjadi 'merah muda', dan lebar garis menjadi 5context.beginPath();context.moveTo(95, 152); konteks .lineTo(110, 150);context.moveTo(190, 150);context.lineTo(205, 152);context.closePath();context.lineWidth = 5;context.strokeStyle = 'merah muda';context.stroke();Buat emotikon
var kanvas = document.getElementById('canvas');var konteks = kanvas.getContext('2d');var image = new Image();image.src= 'https://ke.qq.com/classroom/assets /lib/img/canvas-expression-base.png';image.onload = function(){ konteks.drawImage(gambar, 50, 110, 200, 200);}context.font = '30px arial';context.fillText('Hari ini saya', 20, 50);context.font = '40px arial';context.fillText('Masih ganteng!', 20 , 90 );Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.