ในระหว่างการฝึกงาน ฉันถูกขอให้ใช้ Canvas เพื่อวาดการแสดงออก มันค่อนข้างง่าย ฉันไม่ได้พูดอะไรมาก และตรงไปที่โค้ด:
<body><div id=canvas-warp> <canvas id=canvas style=display: block; margin: 200px auto;> เบราว์เซอร์ของคุณไม่รองรับหน้าต่าง Canvas </canvas></div><script> ฟังก์ชั่น () { var canvas = document.getElementById (canvas); canvas.width = 400; canvas.height = 400; // รับบริบท var บริบท = canvas.getContext(2d); //พารามิเตอร์ฟังก์ชันที่ใช้ในการวาดวงกลมที่เติมสี ได้แก่ พิกัดกึ่งกลาง รัศมี ตำแหน่งเริ่มต้นและสิ้นสุด สีของเส้น และฟังก์ชันเติมสี DrawCircle(x2, y2, r2, a2, b2, lineColor, FillColor) { context.beginPath(); context.arc(x2, y2, r2, a2, b2 * Math.PI); บริบท. context.fillStyle = FillColor; context.fill(); // ยืนยันการเติม context. stroke(); }; // เส้นเริ่มต้นที่ใช้ในการวาดฟังก์ชันส่วนโค้งเป็นสีดำโดยไม่ต้องเติมพารามิเตอร์คือ: พิกัด x กลาง, ศูนย์กลาง y พิกัด, รัศมี, ตำแหน่งเริ่มต้น, ฟังก์ชันตำแหน่งสิ้นสุด DrawsArc(x, y, r, l1, l2) { context.beginPath(); context.arc(x, y, r, l1 * Math.PI, l2 * Math.PI ); context. strokeStyle = black; context. stroke( }; // ฟังก์ชั่นที่ใช้ในการวาดตาฟังก์ชั่น darwEyes (x1, y1, a1, b1) { // พารามิเตอร์คือแกนยาวและแกนสั้นของบริบทตำแหน่งกึ่งกลางวงรี . strokeStyle = #754924 ParamEllipse (บริบท, x1, y1, a1, b1); // ฟังก์ชันวงรี ParamEllipse (บริบท, x, y, a, b) { //ทำให้เส้นทาง (ส่วนโค้ง) วาดในแต่ละวงใกล้กับ 1 พิกเซล var step = (a > b) ? 1 / a : 1 / b; context.beginPath(); context.moveTo(x + a, y) ; //เริ่มวาดจากจุดปลายด้านซ้ายของวงรีสำหรับ (var i = 0; i < 2 * Math.PI; i += step) { //พารามิเตอร์คือ i ซึ่งระบุระดับ (เรเดียน) context.lineTo(x + ก * Math.cos(i), y + b * Math.sin(i)); } context.closePath(); /face DrawCircle(200, 200, 200, 0, 2, #EEE685, #FCF200); //บริบทตาซ้าย. strokeStyle = #754924 darwEyes(116, 130, 18, 25); DrawCircle(110, 127, 12, 0, 2, #754924, #F5F5F5); // ตาขวา darwEyes(296, 130, 18, 25); , 127, 12, 0, 2, #754924, #F5F5F5); // คิ้วซ้ายวาดโค้ง (100, 100, 50, 1.3, 1.7); // วาดคิ้วขวาโค้ง (300, 100, 50, 1.3, 1.7); 200, 120, 180, 0.3, 0.7); </script></body>การเรนเดอร์
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network