English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
بسبب أن HTML5 كان في عامه الناري في السنتين الماضيتين، لذا درست قليلاً، لدي فكرة جديدة وهي أنني سأستخدم وظائف HTML، لذا يجب أن أتعلم كثيرًا.
لقد نظرت بعناية في وظائف Canvas، وأشعر بأن وظائف التفاعل في المستخدم للـ HTML5 تزداد قوة، اليوم نظرت إلى رسم Canvas، إليك بعض الأمثلة، سأقوم بتسجيلها للاستخدام في المستقبل.
1、استخدام Canvas لرسم الخطوط:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.moveTo(20,30); // النقطة الأولى
cans.lineTo(120,90); // النقطة الثانية
cans.lineTo(220,60); // النقطة الثالثة (باستخدام النقطة الثانية كنقطة البداية)
cans.lineWidth=3;
cans.strokeStyle = 'red';
cans.stroke();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
هناك طريقتان للوصول إلى API، moveTo وlineTo، هما بداية النقطة ونهاية النقطة للخط، ويتم تمثيل المتغيرات بـ (X،Y)، strokeStyle وstroke هي نمط رسم المسار ورسم المسار.
2、رسم خط التدرج
خط التدرج هو تأثير التدرج في الألوان، بالطبع يمكن أن يتبع نمط الخط أو لا يتبعه:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.moveTo(0,0);
cans.lineTo(400,300);
var gnt1 = cans.createLinearGradient(0,0,400,300); // التدرج الخطي للخط المتدرج من البداية إلى النهاية
gnt1.addColorStop(0,'red'); // إنشاء لون البداية للتدرج، 0 هو قيمة التحرير، يُفهم بشكل شخصي أنه موقف النسبة على الخط، أكبر قيمة هي 1، يمكن كتابة أي عدد من ألوان التدرج في التدرج الواحد
gnt1.addColorStop(1,'yellow');
cans.lineWidth=3;
cans.strokeStyle = gnt1;
cans.stroke();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
3-رسم المربع أو المربع المربع
هذا النوع من الحاويات يمكن أن يتم إنشاؤه باستخدام HTML4 فقط من خلال الكود الخلفي، ولكن الآن يمكن إنشاء Canvas بسهولة باستخدام ميزات HTML5، لذا فإن ميزة HTML5 مميزة جدًا.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.fillStyle = 'yellow';
cans.fillRect(30,30,340,240);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
هنا يستخدم طريقة واحدة - fillRect ()، من المعروف من الاسم أن هذا هو ملء المربع، يجب ملاحظة أن هذه المعلمة ليست مثل الموقع في الرياضيات، يرجى الرجوع إلى
X،Y هنا تبدأ من نقطة البداية اليسرى العلوية للCanvas، تذكر ذلك!
4-رسم حاوية مربعة بسيطة
في المثال السابق تم مناقشة رسم مربع، تم ملئه باللون، هذا المثال فقط يرسم مربع دون تنفيذ تأثير الملء.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.strokeStyle = 'red';
cans.strokeRect(30,30,340,240);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
هذا بسيط جدًا، مثل المثال السابق، فقط تم استبدال fill ب stroke، يرجى الرجوع إلى المثال السابق للحصول على التفاصيل.
5-رسم مربع متدرج خطي
التباين هو تأثير ممتاز لملء، يمكننا إنشاء مربع متدرج باستخدام مثال 2 ومثال 3.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
var gnt1 = cans.createLinearGradient(10,0,390,0);
gnt1.addColorStop(0,'red');
gnt1.addColorStop(0.5,'green');
gnt1.addColorStop(1,'blue');
cans.fillStyle = gnt1;
cans.fillRect(10,10,380,280);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
لا تحتاج إلى تفسير، تذكر fillRect (X, Y, Width, Height) فقط.
6-ملء دائرة
استخدامات الدائرة واسعة، بما في ذلك أيضًا الدوائر المستديرة.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.beginPath();
cans.arc(200,150,100,0,Math.PI*2,true);
cans.closePath();
اللون المرسوم هو أخضر؛ كان اللون الأصلي هو الأحمر، لكن عندما رأيت الصورة، كنت مستغربًا، أخاف أن أكون مهاجمًا من قبل المحبين للوطن، في الواقع، أنت تعرف ذلك ~
cans.fill();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
استخدام طريقة arc هنا هو arc(X,Y,Radius,startAngle,endAngle,anticlockwise)،وهذا يعني (مستوى X للمركز، مستوى Y للمركز، قطر، زاوية البداية (مستوى)، زاوية النهاية (مستوى)، هل يتم الرسم بالاتجاه المعاكس؟)
مقارنة بين معلمات arc:
أ-cans.arc(200,150,100,0,Math.PI,true);
ج-cans.arc(200,150,100,0,Math.PI/2,true);[/code]
ج-cans.arc(200,150,100,0,Math.PI/2,true);
د-cans.arc(200,150,100,0,Math.PI/2,false);
7-مستطيل دائري
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.beginPath();
cans.arc(200,150,100,0,Math.PI*2,false);
cans.closePath();
cans.lineWidth = 5;
cans.strokeStyle = 'red';
cans.stroke();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
هنا لن أشرح، مثل المثال السابق،LineWidth هو التحكم في عرض الخط.
8-تدرج دائري
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
var gnt = cans.createRadialGradient(200,300,50,200,200,200);
gnt.addColorStop(1,'red');
gnt.addColorStop(0,'green');
cans.fillStyle = gnt;
cans.fillRect(0,0,800,600);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="800px" height="600px">4</canvas>
</body>
</html>
يحتاج إلى توضيح أن طريقة createRadialGradient، المعطيات هي (Xstart,Ystart,radiusStart,XEnd,YEnd,radiusEnd)، مما يعني أن لديه استخدام اثنين من الدوائر، واحدة هي الدائرة الأصلية، والأخرى هي الدائرة التدرجية، في الواقع، يمكن تحقيق العديد من الأنماط من خلال هذا الطريقة التحكم بالتوازي والقطر، مثل
كرة ثلاثية الأبعاد
var gnt = cans.createRadialGradient(200,150,0,200,50,250); gnt.addColorStop(0,'red'); gnt.addColorStop(1,'#333');
هذا هو نهاية محتوى هذا المقال، نأمل أن يكون قد ساعدكم في التعلم، ونأمل أيضًا أن تدعموا تعليمات النطق.
البيان: محتويات هذا المقال تم جمعها من الإنترنت، وتعود حقوق الملكية إلى المالك الأصلي، تم جمع المحتويات من قبل المستخدمين عبر الإنترنت بشكل تلقائي، ويحمل هذا الموقع حقوق الملكية، لم يتم تعديل المحتويات بشكل يدوي، ولا يتحمل الموقع أي مسؤولية قانونية. إذا اكتشفتم محتوى يشتبه في انتهاك حقوق النسخ، فلا تترددوا في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) للإبلاغ، وتقديم الدليل على ذلك، إذا تم التحقق من ذلك، سيتم حذف المحتوى المزعوم فورًا.