نموذج التعليمات البرمجية لرسم الرموز على القماش

تقدم هذه المقالة نموذج التعليمات البرمجية لرسم الرموز على اللوحة القماشية وتشاركها مع الجميع، والتفاصيل هي كما يلي:

رسم وجه مبتسم كرتوني

 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(image, 50, 110, 200, 200);}context.font = '30px arial';context.fillText('أنا اليوم', 20, 50);context.font = '40px arial';context.fillText('ما زلت وسيمًا!', 20 , 90 );

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.