HTML DOM Canvas

‎بوم نقاشي ـHTML DOM Canvas

‎عنصر‎<canvas>‎ يك ناحيه بيت مپي در يك صفحه HTML تعريف مينمايد .

Canvas API‎به جاوا اسكريپت اجازه ميدهد كه روي بوم با آن گرافيك ترسيم نمود . اينAPI ‎داراي امكانات رسم اشكال، خطوط ، منحني ها، باكس ها،متن و تصاوير با امكانات رنگ ، عمليات ‎چرخشي، شفافيت و ساير دستكاري هاي پيكسلي را دارد.

‎افزودن بوم بهHTML

‎ميتوان با تگ‎<canvas>‎ هرجائي ازصفحه عنصر بوم رااضافه كرد .

‎مثال ـ ايجاد بوم درصفه

<canvas id="myCanvas" width="300" height="150"></canvas>

‎روش دسترسي به عنصر بوم

‎با متدHTML DOM‎getElementById()‎‎ ميتوان ارطريق id عنصر ‎<canvas>‎ ‎به آن دسترسي پيدا كرد .نمونه زير:

const myCanvas = document.getElementById("myCanvas");

‎براي ترسيم روي بوم نيازمند ايجاد شئ زمينه دوبعدي است

const ctx = myCanvas.getContext("2d");

‎ترسيم روي عنصر بوم

‎پس از ايجاد يك زمينه دوبعدي روي بوم ، ميتوان روي آن نقاشي كشيد.

‎مثال ـ متد‎fillRect()‎‎ مستطيلي سياه رنگ كه راس بالاي چپ آن در نقطه ‎(20,20)‎وعرض‎150‎ پيكسل وارتفاع آن‎100‎ پيكسل است، را ‎ترسيم ميكند.

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");

ctx.fillRect(20, 20, 150, 100);

‎استفاده از رنگ ها ـUsing Colors

‎ويژگيfillStyle رنگ شئ ترسيمي را مشخص ميكند .

‎مثال ـ ترسيم مستطيل قرمز .پيش فرض رنگ سياه است

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

‎ميتوان با متد‎document.createElement()‎‎ عنصر ‎<canvas>‎ ‎را ايجاد وبه صفحه موجود اضافه نمود.

‎مثال ـ ايجاد عنصر بوم با متد‎document.CreateElement()‎

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

‎مسيرها ـPaths

‎روش متداول ترسيم روي بوم اين است كه:

1. ‎با متد‎beginPath()‎‎ شروع مسير ترسيم
2. ‎بامتد‎moveTo()‎‎ حركت به نقطه ديگر .
3. ‎با متد‎lineTo()‎‎ خط ترسيم ميشود .
4. ‎با متد‎stroke()‎‎ ترسيم مسير

‎مثال ـ

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

‎مرجع كاملCanvas API

‎اين مرجع تمام ويژگي ها وروش هاي شئ‎getContext(‎"2d‎")‎ را كه براي ترسيم ‎متن، خطوط ، كادرها ، دايره ها، تصاوير وموارد ديگر كه روي بوم استفاده ميشود، پوشش ميدهد.

‎متد هاي ترسيمي ـDrawing Methods

‎سه متد ترسيمي مستقيم در رويCanvas وجود دارد .

‎متدهاي مسير ـPath Methods

‎متدهاي مسير درجدول زير همراه با لينك تشريح آنها.

‎متد و ويژگي هاي متني

‎رنگ ها ، سبك ها وسايه ها ـColors,Styles, and Shadows

‎خلاصه متدها وويژگي هاي بخش فوق در جدول زير آمده است .تشريح كامل آنها در لينك Colors,Styles , Shadows ‎آمده است .لينك هر رديف جدول، بخش داخلي همين آدرس ا.ست.

‎تبديلات ـTransformations

‎ترسيم تصوير ـImage Drawing

‎متد ها و ويژگي تصويري روي عنصر بوم مطابق جدول زيراست.

‎تركيب كردن ـComposting

‎ساير متدها ـOther Methods