خلال فترة تدريبي، طُلب مني استخدام القماش لرسم تعبير، ولم أقل الكثير وذهبت مباشرة إلى الكود:
<body><div id=canvas-warp> <canvas id=canvas style=display: block; هامش: 200px auto;> متصفحك لا يدعم Canvas! </canvas></div><script> onload = function () { var Canvas = document.getElementById(canvas); Canvas.height = 400; 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(); // الخط الافتراضي المستخدم لرسم دالة قوسية هو أسود بدون تعبئة تنسيق، نصف القطر، موضع البداية، وظيفة موضع النهاية drawsArc(x, y, r, l1, l2) { context.beginPath(); context.arc(x, y, r, l1 * Math.PI, l2 * Math.PI ); context.strokeStyle = black; context.stroke(); }; // الوظيفة المستخدمة لرسم العيون function darwEyes(x1, y1, a1, b1) { // المعلمات هي المحور الطويل والمحور القصير لسياق موضع مركز القطع الناقص .strokeStyle = #754924 ParamEllipse(context, x1, y1, a1, b1); // وظيفة القطع الناقص ParamEllipse(context, x, y, a, b) { // اجعل المسار (القوس) مرسومًا في كل حلقة قريبًا من 1 بكسل var step = (a > b) ? / a : 1 / b; context.beginPath(); // ابدأ الرسم من نقطة النهاية اليسرى للقطع الناقص for (var i = 0; i < 2 * Math.PI; i += step) { // المعلمة هي i، تشير إلى الدرجة (الراديان) context.lineTo(x + أ * Math.cos(i), y + b * Math.sin(i)); /face drawCircle(200, 200, 200, 0, 2, #EEE685, #FCF200); // العين اليسرى context.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); // رسم الحاجب الأيسر Arc(100, 100, 50, 1.3, 1.7); // رسم الحاجب الأيمن Arc(300, 100, 50, 1.3, 1.7); 200، 120، 180، 0.3، 0.7); </script></body>الاداءات
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.