Selama magang, saya diminta menggunakan kanvas untuk menggambar ekspresi. Caranya relatif sederhana. Saya tidak banyak bicara dan langsung menuju ke kodenya:
<body><div id=canvas-warp> <canvas id=canvas style=display: block; margin: 200px auto;> Browser Anda tidak mendukung Canvas! </canvas></div><script> jendela function() { var kanvas = document.getElementById(kanvas); kanvas.lebar = 400; //Dapatkan konteks var konteks = canvas.getContext(2d); //Parameter fungsi yang digunakan untuk menggambar lingkaran terisi adalah koordinat pusat, radius, posisi awal dan akhir, warna garis, dan fungsi warna isian drawCircle(x2, y2, r2, a2, b2, lineColor, FillColor) { konteks.beginPath(); konteks.arc(x2, y2, r2, a2, b2 * Math.PI); konteks.fillStyle = FillColor; konteks.isi(); //Konfirmasi pengisian konteks.stroke(); //Garis default yang digunakan untuk menggambar fungsi busur berwarna hitam tanpa mengisi koordinat, Radius, posisi awal, posisi akhir fungsi drawsArc(x, y, r, l1, l2) { konteks.beginPath(); ); konteks.strokeStyle = hitam; konteks.stroke() }; //Fungsi yang digunakan untuk menggambar mata function darwEyes(x1, y1, a1, b1) { //Parameternya adalah sumbu panjang dan sumbu pendek dari konteks posisi tengah elips .strokeStyle = #754924 ParamEllipse(konteks, x1, y1, a1, b1); //Fungsi Ellipse ParamEllipse(konteks, x, y, a, b) { //Buat jalur (busur) yang digambar di setiap loop mendekati 1 piksel var step = (a > b) ? //Mulai menggambar dari ujung kiri elips for (var i = 0; i < 2 * Math.PI; i += step) { //Parameternya adalah i, yang menunjukkan derajat (radian) konteks.lineTo(x + sebuah * Matematika.cos(i), y + b * Matematika.sin(i)); } konteks.closePath(); konteks.fillStyle = #754924; konteks.isi(); /face drawCircle(200, 200, 200, 0, 2, #EEE685, #FCF200); //Konteks mata kiri.strokeStyle = #754924 darwEyes(116, 130, 18, 25); drawCircle(110, 127, 12, 0, 2, #754924, #F5F5F5); , 127, 12, 0, 2, #754924, #F5F5F5); //Gambar alis kiriArc(100, 100, 50, 1.3, 1.7); //Gambar alis kananArc(300, 100, 50, 1.3, 1.7); 200, 120, 180, 0,3, 0.7); }</skrip></body>rendering
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.